Vue.js

Appearance

On this page

Floating action buttons (FAB) ​

Material Web catalog.**

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.

Types ​

The 3 sizes of FAB

  1. FAB
  2. Small FAB
  3. Large FAB

Extended FAB ​

2 examples of extended FABs

Usage ​

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

A standard surface fab

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

Lowered ​

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

A standard fab with an edit icon and lowered in elevation

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

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
<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.

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

FAB ​

FABs should display a clear and understandable icon.

A standard surface fab

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

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

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

Without icon ​

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

An extended FAB with a visible label saying reroute

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

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.

html
<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 ​

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

html
<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 ​

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

A branded FAB with a google-colored plus icon.

html
<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 ​

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

An extended branded fab with a google-colored plus icon and the visible text Add

html
<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 ​

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.

html
<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 ​

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

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 ​

Image of a fab with a different theme applied

html
<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 ​

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 ​

TokenDefault 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

html
<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 ​

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 ​

Image of two branded fabs, one regular, one extended with the visible label Add with a different theme applied

html
<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>
    <path fill="none" d="M0 0h36v36H0z"></path>
  </svg>
</md-branded-fab>
<md-branded-fab size="small" 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>

API ​

MdFab <md-fab> ​

Properties ​

PropertyAttributeTypeDefaultDescription
variantvariantstring'surface'The FAB color variant to render.
sizesizestring'medium'The size of the FAB.
NOTE: Branded FABs cannot be sized to small, and Extended FABs do not have different sizes.
labellabelstring''The text to display on the FAB.
loweredloweredbooleanfalseLowers the FAB's elevation.

MdBrandedFab <md-branded-fab> ​

Properties ​

PropertyAttributeTypeDefaultDescription
variantvariantstring'surface'The FAB color variant to render.
sizesizestring'medium'The size of the FAB.
NOTE: Branded FABs cannot be sized to small, and Extended FABs do not have different sizes.
labellabelstring''The text to display on the FAB.
loweredloweredbooleanfalseLowers the FAB's elevation.

Methods ​

MethodParametersReturnsDescription
getRenderClassesNone{ primary: boolean; secondary: boolean; tertiary: boolean; small: boolean; lowered: boolean; large: boolean; extended: boolean; }

Edit this page on GitHub