{"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"},"name":"@material/button","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 Button\n \n```\n\n> _NOTE_: Examples here use the generic ``, but users can also apply the `mdc-button` class to `` elements.\n\n### Styles\n\n```scss\n@import \"@material/button/mdc-button\";\n```\n\n### JavaScript Instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Contained Button\n\nTo style a contained button, add the `mdc-button--raised` class to the `` element for a contained button with elevation, or the `mdc-button--unelevated` class for a contained button flush with the surface.\n\n### Outlined Button\n\nTo style an outlined button, add the class `mdc-button--outlined` to the `` element.\n\n### Icons \n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\nWe recommend you use [Material Icons](https://material.io/icons/) from Google Fonts:\n\n```html\n\n favorite \n Button\n \n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n \n ...\n \n Button\n \n```\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the ``, or set the `disabled` attribute on the `` containing the button.\nDisabled buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n\n Button\n \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","license":"Apache 2.0","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","button"],"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":{},"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"}],"_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"},"_id":"@material/button@0.39.0-0","version":"0.39.0-0"}