1. Interactive Demo
  2. Types
    1. Extended FAB
  3. Usage
    1. Lowered
  4. Accessibility
  5. FAB
    1. Extended
      1. Without icon
    2. Colors
    3. Sizes
  6. Branded FAB
    1. Extended
    2. Sizes
  7. Theming
    1. FAB tokens
    2. FAB example
      1. Sizes tokens
      2. Extended FAB tokens
      3. Extended FAB example
    3. Branded FAB tokens
    4. Branded FAB example
  8. API
    1. MdFab <md-fab>
      1. Properties
    2. MdBrandedFab <md-branded-fab>
      1. Properties
      2. Methods

Floating action buttons (FAB)

FAB represents the most important action on a screen. It puts key actions within reach.

Extended FABs 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'

Interactive Demo

Link to “Interactive Demo”

View interactive demo inline.

Open interactive demo in new tab.

Types

Link to “Types”
accessible_forward
1
edit
2
palette
3
  1. FAB
  2. Small FAB
  3. Large FAB

Extended FAB

Link to “Extended FAB”
navigation
1
2

Usage

Link to “Usage”

FABs should have an icon, such as a font md-icon, an svg, or an img.

edit
<md-fab aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

Lowered

Link to “Lowered”

FABs can be set to a lower elevation with the lowered attribute.

edit
<md-fab lowered aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

Accessibility

Link to “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.

<md-fab aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

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.

<md-fab label="Edit" aria-label="Edit Comment">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

FAB

Link to “FAB”

FABs should display a clear and understandable icon.

edit
<md-fab aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

Extended

Link to “Extended”

FABs may be extended with a label for additional emphasis. Extended FABs can omit their icon.

edit
<md-fab label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

Without icon

Link to “Without icon”

Extended FABs are the only FABs that can be used without an icon.

<md-fab label="Reroute"></md-fab>

Colors

Link to “Colors”

FAB colors may be changed with the variant attribute. It can be set to "surface" (default), "primary", "secondary", or "tertiary".

editeditedit
<md-fab variant="primary" aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab variant="secondary" aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab variant="tertiary" aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

Sizes

Link to “Sizes”

FABs may be small, medium (default), or large by setting the size attribute. Small FABs can optionally further reduce their touch target.

editediteditedit
<md-fab size="small" touch-target="none" aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab size="small" aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab size="large" aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

Branded FAB

Link to “Branded FAB”

Branded FABs use a brightly colored logo for their icon. Unlike FAB, branded FABs do not have color variants.

<md-branded-fab size="small" aria-label="Add">
  <svg slot="icon" viewBox="0 0 36 36">
    <path fill="#34A853" d="M16 16v14h4V20z"></path>
    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
    <path fill="none" d="M0 0h36v36H0z"></path>
  </svg>
</md-branded-fab>

Extended

Link to “Extended”

Branded FABs may be extended with a label for additional emphasis. Unlike FAB, branded FABs should always display their logo icon.

<md-branded-fab label="Add">
  <svg slot="icon" viewBox="0 0 36 36">
    <path fill="#34A853" d="M16 16v14h4V20z"></path>
    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
    <path fill="none" d="M0 0h36v36H0z"></path>
  </svg>
</md-branded-fab>

Sizes

Link to “Sizes”

Branded FABs may be medium (default) or large by setting the size attribute.

<md-branded-fab aria-label="Add">
  <svg slot="icon" viewBox="0 0 36 36">
    <path fill="#34A853" d="M16 16v14h4V20z"></path>
    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
    <path fill="none" d="M0 0h36v36H0z"></path>
  </svg>
</md-branded-fab>
<md-branded-fab size="large" aria-label="Add">
  <svg slot="icon" viewBox="0 0 36 36">
    <path fill="#34A853" d="M16 16v14h4V20z"></path>
    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
    <path fill="#EA4335" d="M20 16V6h-4v14z"></path>
    <path fill="none" d="M0 0h36v36H0z"></path>
  </svg>
</md-branded-fab>

Theming

Link to “Theming”

FAB supports Material theming and can be customized in terms of color, typography, and shape.

FAB tokens

Link to “FAB tokens”
TokenDefault 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-size24px

FAB example

Link to “FAB example”
edit
<style>
  :root {
    --md-sys-color-surface-container-high: #e3e9e9;
    --md-sys-color-primary: #006a6a;
    --md-fab-container-shape: 0px;
    --md-fab-icon-size: 36px;
    background-color: #f4fbfa;
  }
</style>
<md-fab aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

Sizes tokens

Link to “Sizes tokens”
TokenDefault value
--md-fab-small-container-shape--md-sys-shape-corner-medium
--md-fab-small-icon-size24px
--md-fab-large-container-shape--md-sys-shape-corner-extra-large
--md-fab-large-icon-size36px

Extended FAB tokens

Link to “Extended FAB tokens”
TokenDefault value
--md-fab-label-text-font--md-sys-typescale-label-large-font

Extended FAB example

Link to “Extended FAB example”
edit
<style>
  :root {
    --md-sys-color-surface-container-high: #e3e9e9;
    --md-sys-color-on-surface: #161d1d;
    --md-sys-color-primary: #006a6a;
    --md-fab-container-shape: 0px;
    --md-fab-icon-size: 36px;
    background-color: #f4fbfa;
  }
</style>
<md-fab label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

Branded FAB tokens

Link to “Branded FAB tokens”
TokenDefault 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-size36px
--md-fab-branded-label-text-font--md-sys-typescale-label-large-font

Branded FAB example

Link to “Branded FAB example” 
<style>
  :root {
    --md-sys-color-surface-container-high: #e3e9e9;
    --md-sys-color-on-surface: #161d1d;
    --md-fab-branded-icon-size: 48px;
    --md-fab-branded-container-shape: 0px;
    background-color: #f4fbfa;
  }
</style>
<md-branded-fab size="small" aria-label="Add">
  <svg slot="icon" viewBox="0 0 36 36">
    <path fill="#34A853" d="M16 16v14h4V20z"></path>
    <path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
    <path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
    <path fill="#EA4335" d="M20 16V6h-4v14z"></path