\n\n## Installation\n\n```\nnpm install @material/fab\n```\n\n## Usage\n\n### Load Material Icons\n\nWe recommend you load [Material Icons](https://material.io/icons/) from Google Fonts\n\n```html\n\n \n\n```\n\n### HTML Structure\n\n```html\n\n```\n\n> _NOTE:_ The floating action button icon can be used with a `span`, `i`, `img`, or `svg` element.\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-fab` | Mandatory, for the button element\n`mdc-fab__icon` | Mandatory, for the icon element\n`mdc-fab--mini` | Optional, modifies the FAB to a smaller size\n`mdc-fab--exited` | Optional, animates the FAB out of view. When this class is removed, the FAB will return to view.\n\n> **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.\n\n### Absolutely Positioned\n\nDevelopers must position MDC FAB as needed within their application's design.\n\n```html\n\n\n\n```\n\n### Adding MDC Ripple\n\nTo add the ripple effect to an MDC FAB, attach a [ripple](../mdc-ripple) instance to the\n`mdc-fab` element.\n\n```js\nmdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-fab'));\n```\n\nYou can also do this declaratively when using the [material-components-web](../material-components-web) package.\n\n```html\n\n```\n\nMDC FAB is fully aware of MDC Ripple styles, so no DOM or CSS changes are required.\n\n### Sass Mixins\n\nBy default an MDC FAB will inherit its color from the theme. This mixin will override the color of the MDC FAB's container, but maintain accessibility standards for the ink and ripple. The mixin is intended for customizing an MDC FAB's color to a non-theme color.\n\n#### `mdc-fab-accessible($container-color)`\n\nChanges the FAB's container color to the given color, and updates the FAB'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, or ripple. You can use all of them if you want to completely customize a FAB. 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, and ripple colors that work together, and meet accessibility standards.**\n\nMixin | Description\n--- | ---\n`mdc-fab-container-color($color)` | Sets the container color to the given color\n`mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value.\n`mdc-fab-ink-color($color)` | Sets the ink color to the given color\n\nThe ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins.\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-fab-container-color` will not honor CSS variables in Edge.\nThis means you will need to override FAB container styles manually for Edge if you are altering the affected CSS variables for theme properties (FAB uses secondary 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","floating action button","fab"],"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 floating action 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/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fab_0.35.0_1524523216503_0.039039188959063775","host":"s3://npm-registry-packages"},"_id":"@material/fab@0.35.0","version":"0.35.0"}