# Floating action buttons (FAB) **This documentation is fully rendered on the [Material Web catalog](https://material-web.dev/components/fab/).** [FAB](https://m3.material.io/components/floating-action-button) represents the most important action on a screen. It puts key actions within reach. [Extended FABs](https://m3.material.io/components/extended-fab) help people take primary actions. They're wider than FABs to accommodate a text label and larger target area. A phone showing a payment screen with a green filled button that says 'Make
payment' * Design articles * [FAB](https://m3.material.io/components/floating-action-button) * [Extended FAB](https://m3.material.io/components/extended-fab) * API Documentation (*coming soon*) * [Source code](https://github.com/material-components/material-web/tree/main/fab) ## Types ![The 3 sizes of FAB](images/fab/fabs.webp "There are three sizes of floating action buttons: FAB, small FAB, and large FAB") 1. [FAB](#fab) 2. [Small FAB](#sizes) 3. [Large FAB](#sizes) ### Extended FAB ![2 examples of extended FABs](images/fab/extended-fabs.webp "There are two types of extended FABs with and without icon") * [Extended FAB with both icon and label text](#extended) * [API Documentation](#api) * [Extended FAB without icon](#without-icon) ## Usage FABs should have an icon, such as a font `md-icon`, an `svg`, or an `img`. ![A standard surface fab](images/fab/usage-fab.webp) ```html edit ``` ### Lowered FABs can be set to a lower elevation with the `lowered` attribute. ![A standard fab with an edit icon and lowered in elevation](images/fab/usage-lowered.webp) ```html edit ``` ## Accessibility Icon-only FABs must include an `aria-label` that describes its action. Otherwise if `aria-label` is not provided, the FAB will default to announcing its visible contents. ```html edit ``` Extended FABs use their `label` for accessibility. Add an `aria-label` for additional context if needed. By supplying the `label` attribute, the extended FAB will make sure that the icon is not announced. ```html edit ``` ## FAB FABs should display a clear and understandable icon. ![A standard surface fab](images/fab/usage-fab.webp) ```html edit ``` ### Extended FABs may be extended with a label for additional emphasis. Extended FABs can omit their icon. ![An extended FAB with an edit icon and the visible text edit](images/fab/usage-extended.webp) ```html edit ``` #### Without icon Extended FABs are the only FABs that can be used without an icon. ![An extended FAB with a visible label saying reroute](images/fab/usage-without-icon.webp) ```html ``` ### Colors FAB colors may be changed with the `variant` attribute. It can be set to "surface" (default), "primary", "secondary", or "tertiary". ![Three fabs with edit icons next to each other but the first is primary colored, second is secondary, and the last is tertiary colored.](images/fab/usage-color.webp) ```html edit edit edit ``` ### Sizes FABs may be small, medium (default), or large by setting the `size` attribute. Small FABs can optionally further reduce their touch target. ![Four surface fabs side by side with edit icons of visual size size small, small, medium, and large](images/fab/usage-sizes.webp) ```html edit edit edit edit ``` ## Branded FAB Branded FABs use a brightly colored logo for their icon. Unlike [FAB](#fab), branded FABs do not have color variants. ![A branded FAB with a google-colored plus icon.](images/fab/usage-branded.webp) ```html ``` ### Extended Branded FABs may be extended with a label for additional emphasis. Unlike [FAB](#fab), branded FABs should always display their logo icon. ![An extended branded fab with a google-colored plus icon and the visible text Add](images/fab/usage-branded-extended.webp) ```html ``` ### Sizes Branded FABs may be medium (default) or large by setting the `size` attribute. ![Two branded FABs next to each other with a google-branded plus icon. A medium sized one and a large one.](images/fab/usage-branded-sizes.webp) ```html ``` ## Theming FAB supports [Material theming](../theming/README.md) and can be customized in terms of color, typography, and shape. ### FAB tokens Token | Default value ---------------------------------- | --------------------------------------- `--md-fab-container-color` | `--md-sys-color-surface-container-high` `--md-fab-lowered-container-color` | `--md-sys-color-surface-container-low` `--md-fab-container-shape` | `--md-sys-shape-corner-large` `--md-fab-icon-color` | `--md-sys-color-primary` `--md-fab-icon-size` | `24px` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab.scss) ### FAB example ![Image of a fab with a different theme applied](images/fab/theming-fab.webp) ```html edit ``` #### Sizes tokens Token | Default value -------------------------------- | ------------- `--md-fab-small-container-shape` | `--md-sys-shape-corner-medium` `--md-fab-small-icon-size` | `24px` `--md-fab-large-container-shape` | `--md-sys-shape-corner-extra-large` `--md-fab-large-icon-size` | `36px` #### Extended FAB tokens Token | Default value -------------------------- | ------------------------------------- `--md-fab-label-text-font` | `--md-sys-typescale-label-large-font` #### Extended FAB example ![Image of an extended FAB with a different theme applied](images/fab/theming-extended.webp) ```html edit ``` ### Branded FAB tokens Token | Default value ---------------------------------- | --------------------------------------- `--md-fab-branded-container-color` | `--md-sys-color-surface-container-high` `--md-fab-branded-container-shape` | `--md-sys-shape-corner-large` `--md-fab-branded-icon-size` | `36px` `--md-fab-branded-label-text-font` | `--md-sys-typescale-label-large-font` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab-branded.scss) ### Branded FAB example ![Image of two branded fabs, one regular, one extended with the visible label Add with a different theme applied](images/fab/theming-branded.webp) ```html ``` ## API ### MdFab <md-fab> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. | | `size` | `size` | `string` | `'medium'` | The size of the FAB.
NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. | | `label` | `label` | `string` | `''` | The text to display on the FAB. | | `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. | ### MdBrandedFab <md-branded-fab> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. | | `size` | `size` | `string` | `'medium'` | The size of the FAB.
NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. | | `label` | `label` | `string` | `''` | The text to display on the FAB. | | `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. | #### Methods | Method | Parameters | Returns | Description | | --- | --- | --- | --- | | `getRenderClasses` | _None_ | `{ primary: boolean; secondary: boolean; tertiary: boolean; small: boolean; lowered: boolean; large: boolean; extended: boolean; }` | |