{"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"},"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-web.appspot.com/button.html\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/buttons.png\" width=\"363\" alt=\"Buttons screenshot\">\n  </a>\n</div>-->\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<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/buttons.html\">Material Design guidelines: Buttons</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components-web.appspot.com/button.html\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/button\n```\n\n## Usage\n\n### HTML Structure\n```html\n<button class=\"mdc-button\">\n  Button\n</button>\n```\n\n> Note: Examples and documents use generic `<button>`, but users can also apply\n`mdc-button` to `<a class=\"mdc-button\">Link Button</a>` in cases where it is\nsemantically correct.\n\n### Adding Icon\n\nUsers can nest `mdc-button__icon` inside the button element to add an icon. The icon in button\nis set to 18px to meet legibility requirements. This element should also include `aria-hidden=\"true\"`.\n\nWe recommend you load [Material Icons](https://material.io/icons/) from Google Fonts:\n\n```html\n<head>\n  <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n</head>\n\n<button class=\"mdc-button\">\n  <i class=\"material-icons mdc-button__icon\" aria-hidden=\"true\">favorite</i>\n  Button\n</button>\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n<button class=\"mdc-button\">\n  <svg class=\"mdc-button__icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"...\">\n  ...\n  </svg>\n  SVG Icon\n</button>\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<button class=\"mdc-button mdc-button--raised\" disabled>\n  Raised disabled button\n</button>\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<button class=\"mdc-button\" data-mdc-auto-init=\"MDCRipple\">\n  Flat button\n</button>\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","license":"Apache 2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.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":"5.6.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":"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.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"},"_id":"@material/button@0.35.0","version":"0.35.0"}