{"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"},"name":"@material/button","readme":"\n\n# Buttons\n\n[Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.\n\nThere are four types of buttons:\n\n1. [Text button](#text-button)\n2. [Outlined button](#outlined-button)\n3. [Contained button](#contained-button)\n4. [Toggle button](#toggle-button)\n\n**Note: Toggle buttons are implemented using the `mdc-icon-button` component.\nFor more information, see the [`mdc-icon-button` page](../mdc-icon-button).**\n\n![Example of the four button types](images/buttons_types.png)\n\n## Using buttons\n\n### Installation\n\n```\nnpm install @material/button\n```\n\n### Styles\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n```\n\n### JavaScript instantiation\n\nThe button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. See [MDC Ripple](../mdc-ripple) for details.\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n### Making buttons accessible\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your button:\n\n```html\n
\n \n
\n```\n**Note: The outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).**\n\n## Text button\n\n[Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.\n\n### Text button example\n\n\"Text\n\n```html\n \n```\n\nText button with icon example\n\n\"Text\n\n```html\n\n\n```\n\n## Outlined button\n\n[Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.\n\n### Outlined button example\n\n\"Outlined\n\n```html\n\n```\n\nOutlined button with icon example\n\n\"Outlined\n\n```html\n\n```\n\n## Contained button\n\n[Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.\n\n#### Contained button example\n\n\"Contained\n\n```html\n\n```\n\n**Note**: `mdc-button--raised` is applied for a contained button with elevation,\nand `mdc-button--unelevated` is applied for a contained button flush with the surface.\n\nContained button with icon example\n\n\"Contained\n\n```html\n\n```\n\n## Toggle button\n\n[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices.\n\nThere are two types of toggle buttons:\n\n* [Toggle button](#toggle-button)\n* [Icon](#icon)\n\n\"toggle\n\nMDC Web currently does not support toggle button groups.\n\n### Icon\n\nIcons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.\n\nFor more details, see the [`mdc-icon-button` page](../mdc-icon-button).\n\n## Other Variants\n\n### Icon\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\nTo add an icon, add an element with the `mdc-button__icon` class inside the button element and set the attribute `aria-hidden=\"true\"`. The icon is set to 18px to meet legibility requirements.\n\n```html\n\n```\n\nIt's also possible to use an SVG icon:\n\n```html\n\n```\n\n#### Trailing Icon\n\nCertain icons make more sense to appear after the button's text label rather than before. This can be accomplished by\nputting the icon markup _after_ the `mdc-button__label` element.\n\n```html\n\n```\n\n> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.\n\n### Disabled\n\nTo disable a button, add the `disabled` attribute directly to the `\n```\n\n## Button theming example\n\nThe following example shows text, contained, and outlined button types with Material Theming.\n\n\"Button\n\n### Theming with Sass variables\n\nBefore importing any MDC Web modules, set the theme colors in your Sass file:\n\n```scss\n@use \"@material/theme\" with (\n $primary: #FEDBD0,\n $on-primary: #442C2E\n);\n```\n\nIn this case we also want to customize the label color of the text and outlined\nbuttons, to fulfill color contrast requirements. Assuming that you've applied\nthe `custom-text-button` and `custom-outlined-button` classes to your buttons:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n @include button.ink-color(#84565E);\n}\n```\n\n### Theming with CSS custom properties\n\nIf you want to customize the theme for buttons without changing the theme\nacross the app, you can also use CSS custom properties:\n\n```scss\n@use \"@material/button\";\n\n@include button.core-styles;\n\n.custom-text-button,\n.custom-outlined-button {\n --mdc-theme-primary: #FEDBD0;\n --mdc-theme-on-primary: #442C2E;\n\n @include button.ink-color(#84565E);\n}\n```\n\nFor a more information on theming in general, see\n[this page](../../docs/theming.md).\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-button` | Mandatory. Defaults to a text button that is flush with the surface.\n`mdc-button__ripple` | Mandatory. Indicates the element which shows the ripple styling.\n`mdc-button--raised` | Optional. Styles a contained button that is elevated above the surface.\n`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.\n`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.\n`mdc-button__label` | Recommended.\\* Indicates the element containing the button's text label.\n`mdc-button__icon` | Optional. Indicates the element containing the button's icon.\n\n **_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for\n buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist\n directly within the `mdc-button` element.
\n However, the `mdc-button__label` class may become mandatory for all cases in the future so we recommended to\n always include it.**\n\n### Sass mixins\n\nTo customize a button's color and properties, you can use the following mixins.\n\n#### Basic Sass mixins\n\nMDC Button uses [MDC Theme](../mdc-theme)'s `primary` color by default. Use the following mixins to customize it.\n\nMixin | Description\n--- | ---\n`filled-accessible($container-fill-color)` | Sets the container fill color for a contained (_raised_ or _unelevated_) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards\n\n#### Advanced Sass mixins\n\nThese mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.\n\nMixin | Description\n--- | ---\n`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.\n`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.\n`icon-color($color)` | Sets the icon color to the given color for an enabled button.\n`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.\n`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.\n`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).\n`height($height)` | Sets custom height for button.\n`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`horizontal-padding($padding)` | Sets horizontal padding to the given number.\n`outline-color($color)` | Sets the outline color to the given color for an enabled button.\n`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.\n`outline-width($width, $padding)` | Sets the outline width to the given number (defaults 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","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.20.2/node@v10.20.1+x64 (linux)","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":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-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":"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"},"_id":"@material/button@7.0.0-canary.2f052d824.0","version":"7.0.0-canary.2f052d824.0"}