{"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"},"name":"@material/button","readme":"<!--docs:\ntitle: \"Buttons\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design-styled buttons.\"\niconId: button\npath: /catalog/buttons/\n-->\n\n# Buttons\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/button\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/buttons.png\" width=\"363\" alt=\"Buttons screenshot\">\n  </a>\n</div>-->\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-buttons\">Material Design guidelines: Buttons</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/button\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<button class=\"mdc-button\">\n  <div class=\"mdc-button__ripple\"></div>\n  <span class=\"mdc-button__label\">Button</span>\n</button>\n```\n\n> _NOTE_: Examples here use the generic `<button>`, but users can also apply the `mdc-button` class to `<a>` 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 `<button>` 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 `<button>` element.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n<button class=\"mdc-button\">\n  <div class=\"mdc-button__ripple\"></div>\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">favorite</i>\n  <span class=\"mdc-button__label\">Button</span>\n</button>\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n<button class=\"mdc-button\">\n  <div class=\"mdc-button__ripple\"></div>\n  <svg class=\"mdc-button__icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"...\">\n  ...\n  </svg>\n  <span class=\"mdc-button__label\">Button</span>\n</button>\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n<button class=\"mdc-button\">\n  <div class=\"mdc-button__ripple\"></div>\n  <span class=\"mdc-button__label\">Button</span>\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">favorite</i>\n</button>\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `<button>`, or set the `disabled` attribute on the `<fieldset>` containing the button.\nDisabled buttons cannot be interacted with and have no visual interaction effect.\n\n```html\n<button class=\"mdc-button\" disabled>\n  <div class=\"mdc-button__ripple\"></div>\n  <span class=\"mdc-button__label\">Button</span>\n</button>\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<span>\n  <button class=\"mdc-button mdc-button--touch\">\n    <div class=\"mdc-button__ripple\"></div>\n    <span class=\"mdc-button__label\">My Accessible Button</span>\n    <div class=\"mdc-button__touch\"></div>\n  </button>\n</span>\n```\n\nNote that the wrapper `<span>` 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","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@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","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":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","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"}],"_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"},"_id":"@material/button@4.0.0-canary.1","version":"4.0.0-canary.1"}