# @material/mwc-fab

> Material design floating action button component

Latest version **0.27.0** (published 2022-08-12) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @material/mwc-fab
pnpm add @material/mwc-fab
yarn add @material/mwc-fab
bun add @material/mwc-fab
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.27.0 |
| Published | 2022-08-12 |
| First published | 2018-05-08 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 84.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11284 |
| Maintainers | yefim, abhiomkar, azakus, bicknellr, material-admin, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv |
| Keywords | material design, web components, fab |

## Links

- npm: https://www.npmjs.com/package/@material/mwc-fab
- Repository: https://github.com/material-components/material-components-web-components
- Homepage: https://github.com/material-components/material-components-web-components#readme
- Issues: https://github.com/material-components/material-components-web-components/issues
- npm.io page: https://npm.io/package/@material/mwc-fab

## Dependencies (3)

- [lit](https://npm.io/package/lit.md) ^2.0.0
- [tslib](https://npm.io/package/tslib.md) ^2.0.1
- [@material/mwc-ripple](https://npm.io/package/@material/mwc-ripple.md) ^0.27.0

## Recent versions

- 0.27.0 (latest) — 2022-08-12
- 0.26.0-canary.0af8ade5.0 (canary) — 2022-02-07
- 0.26.1 — 2022-05-09
- 0.26.0 — 2022-05-03
- 0.26.0-canary.69ba13b7.0 — 2022-01-19
- 0.26.0-canary.893fc857.0 — 2022-01-07
- 0.26.0-canary.2afff08e.0 — 2022-01-06
- 0.26.0-canary.b9d35b69.0 — 2022-01-05
- 0.26.0-canary.e1bcf14e.0 — 2021-12-28
- 0.26.0-canary.cf7ba5a9.0 — 2021-12-10
- 0.26.0-canary.3b2452cc.0 — 2021-12-09
- 0.26.0-canary.0547aeeb.0 — 2021-12-06
- 0.26.0-canary.345c2bb9.0 — 2021-12-02
- 0.26.0-canary.8067ce28.0 — 2021-11-04
- 0.26.0-canary.448f6cb9.0 — 2021-11-04
- … 706 more at https://npm.io/package/@material/mwc-fab/versions

## README

# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)
> IMPORTANT: The Material Web Components are a work in progress and subject to
> major changes until 1.0 release.

A floating action button (FAB) represents the primary action of a screen.

![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/standard.png)
![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/mini.png)
![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/extended.png)
![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/custom_color.png)

[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)

[Demo](https://material-components.github.io/material-web/demos/fab/)

## Installation

```sh
npm install @material/mwc-fab
```

> NOTE: The Material Web Components are distributed as ES2017 JavaScript
> Modules, and use the Custom Elements API. They are compatible with all modern
> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional
> tooling step is required to resolve *bare module specifiers*, as well as
> transpilation and polyfills for IE11. See
> [here](https://github.com/material-components/material-components-web-components#quick-start)
> for detailed instructions.

## Example usage

### Standard

![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/standard.png)

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">

<mwc-fab icon="edit"></mwc-fab>

<script type="module">
  import '@material/mwc-fab/mwc-fab.js';
  const fab = document.querySelector('mwc-fab');
  fab.addEventListener('click', () => {
    edit();
  });
</script>
```

### Standard - slotted

![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/standard.png)

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">

<mwc-fab label="edit">
  <mwc-icon slot="icon">edit</mwc-icon>
</mwc-fab>

<script type="module">
  import '@material/mwc-fab/mwc-fab.js';
  import '@material/mwc-icon/mwc-icon.js';
</script>
```

_Note: `label` should still be set for button accessibility purposes._

### Mini

![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/mini.png)

```html
<mwc-fab mini icon="add"></mwc-fab>
```

### Extended

![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/extended.png)

```html
<mwc-fab extended icon="shopping_cart" label="Add to cart"></mwc-fab>
```
### Customize colors

![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/custom_color.png)

```css
mwc-fab {
  --mdc-theme-secondary: white;
  --mdc-theme-on-secondary: black;
}
```

## API

### Slots

| Name     | Description
| -------- | ---
| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.

### Properties/Attributes

| Name            | Type      | Description
| --------------- | --------- |------------
| `icon`          | `string`  | The icon to display.
| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.
| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.
| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.
| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.
| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.

### Methods
*None*

### Events
*None*

### CSS Custom Properties

Name                               | Default   | Description
---------------------------------- | --------- | -----------
`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.
`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.
`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.
`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).
`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.

#### Elevation values

| Elevation Level | CSS Value
| ---- | ---
| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`
| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`
| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`

#### Global Custom Properties

This component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)
custom properties.

| Name                                 | Description
| ------------------------------------ | -----------
| `--mdc-icon-font`                    | Font to use for the icon.
| `--mdc-theme-secondary`              | Background color of the FAB.
| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.

## Additional references

- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)

---
_Source: https://npm.io/package/@material/mwc-fab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._