Floating Action Button (FAB)

Done

The floating action button (FAB) is a district-wide call to action, and should be the most commonly used highest-level action a user might want to take within a widget. The unique functionality of the FAB is that it can either trigger the start of a task in a new context, or become a new surface for actions and content to live within.

Anatomy

The essential part of the FAB is the trigger, which can trigger a new flow/task or become one of two types of surfaces: floating action menu, or a full context. The FAB has high emphasis and medium emphasis variants.

Trigger (Condensed)

High Emphasis

Raised container
Avatar - Medium

Medium Emphasis

Raised Container
Avatar - Medium

Trigger (Extended)

High Emphasis

Raised container
Avatar - Medium (Optional)
Label - Button

Medium Emphasis

Raised container
Avatar - Medium (Optional)
Label - Button

Do’s and don’ts

To help understand more clearly the difference between the FAB and quick action buttons, please follow these do’s and don’ts.

Do

Use FABs for the primary widget/district-level actions

Don’t

Use FABs for overflow actions
Use FABs for minor actions
Don’t display multiple actions within a task flow (they should float above the content and outside the flow of specific tasks)
Cover up FABs with other contexts or layers
Display FABs in both the standard placement and marquee placement at the same time (see Placement section)

Specs

Color (Condensed)

Element	Property	Value
Container (static)	Background color	∆colorBrandedAffordance
Avatar (static)	Background color	None
Avatar (static)	Icon color	∆colorBrandedAffordanceOn
Container (hover)	Background color	∆colorBrandedAffordanceHover (∆colorBrandedAffordance600)
Avatar (hover)	Background color	None
Avatar (hover)	Icon color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Container (pressed)	Background color	∆colorBrandedAffordancePressed (∆colorBrandedAffordance700)
Avatar (pressed)	Background color	None
Avatar (pressed)	Icon color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Container (selected)	Background color	∆colorBrandedAffordanceSelected (∆colorBrandedAffordance500)
Avatar (selected)	Background color	None
Avatar (selected)	Icon color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)

Color (Extended)

Element	Property	Value
Container (static)	Background color	∆colorBrandedAffordance
Avatar (static)	Background color	None
Avatar (static)	Icon color	∆colorBrandedAffordanceOn
Label (static)	Text color	∆colorBrandedAffordanceOn
Container (hover)	Background color	∆colorBrandedAffordanceHover (∆colorBrandedAffordance600)
Avatar (hover)	Background color	None
Avatar (hover)	Icon color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Label (hover)	Text color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Container (pressed)	Background color	∆colorBrandedAffordancePressed (∆colorBrandedAffordance700)
Avatar (pressed)	Background color	None
Avatar (pressed)	Icon color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Label (pressed)	Text color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Container (selected)	Background color	∆colorBrandedAffordanceSelected (∆colorBrandedAffordance500)
Avatar (selected)	Background color	None
Avatar (selected)	Icon color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)
Label (selected)	Text color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)

Color (Menu)

Element	Property	Value
Container (static)	Background color	∆colorBrandedAffordance
Avatar (static)	Background color	None
Avatar (static)	Icon color	∆colorBrandedAffordanceOn
Label (static)	Text color	∆colorBrandedAffordanceOn
Container (hover)	Background color	∆colorBrandedAffordanceHover (∆colorBrandedAffordance600)
Avatar (hover)	Background color	None
Avatar (hover)	Icon color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Label (hover)	Text color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Container (pressed)	Background color	∆colorBrandedAffordancePressed (∆colorBrandedAffordance700)
Avatar (pressed)	Background color	None
Avatar (pressed)	Icon color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Label (pressed)	Text color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Container (selected)	Background color	∆colorBrandedAffordanceSelected (∆colorBrandedAffordance500)
Avatar (selected)	Background color	None
Avatar (selected)	Icon color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)
Label (selected)	Text color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)

Elevation

Element	Property	Value
Container	Shadow Color	∆surfaceBrandedRaisedShadowColor
Container	Shadow Y offset	∆surfacePlatformRaisedShadowY
Container	Shadow opacity	∆surfacePlatformRaisedShadowOpacity
Container (static)	Shadow blur	∆surfacePlatformRaisedShadowBlurResting
Container (hover)	Shadow blur	∆surfacePlatformRaisedShadowBlurLifted
Container (pressed)	Shadow blur	∆surfacePlatformRaisedShadowBlurPressed
Container	Shadow spread	∆surfacePlatformRaisedShadowSpread

Spacing

Min/max

The height of the floating action menu is based on the number of list items (min 2/max 6). The width is based on the widest list item, which can wrap if the screen is not wide enough to fit the entire label (wrapping to a second line should not increase the height of the list item since the label is vertically aligned to the adjoining avatar). Truncate the label if more than two lines are needed.

States

‍

Theming

The FAB can take on the Affordance or Guidance colors with the Affordance being the default. (See color section above for default)

Color (Condensed)

Element	Property	Value
Container (static)	Background color	∆colorBrandedAffordance
Avatar (static)	Icon color	∆colorBrandedAffordanceOn
Container (hover)	Background color	∆colorBrandedAffordanceHover (∆colorBrandedAffordance600)
Avatar (hover)	Icon color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Container (pressed)	Background color	∆colorBrandedAffordancePressed (∆colorBrandedAffordance700)
Avatar (pressed)	Icon color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Container (selected)	Background color	∆colorBrandedAffordanceSelected (∆colorBrandedAffordance500)
Avatar (selected)	Icon color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)

Color (Extended)

Element	Property	Value
Container (static)	Background color	∆colorBrandedAffordance
Avatar (static)	Icon color	∆colorBrandedAffordanceOn
Label (static)	Text color	∆colorBrandedAffordanceOn
Container (hover)	Background color	∆colorBrandedAffordanceHover (∆colorBrandedAffordance600)
Avatar (hover)	Icon color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Label (hover)	Text color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Container (pressed)	Background color	∆colorBrandedAffordancePressed (∆colorBrandedAffordance700)
Avatar (pressed)	Icon color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Label (pressed)	Text color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Container (selected)	Background color	∆colorBrandedAffordanceSelected (∆colorBrandedAffordance500)
Avatar (selected)	Icon color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)
Label (selected)	Text color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)

Color (Menu)

Element	Property	Value
Container (static)	Background color	∆colorBrandedAffordance
Avatar (static)	Icon color	∆colorBrandedAffordanceOn
Label (static)	Text color	∆colorBrandedAffordanceOn
Container (hover)	Background color	∆colorBrandedAffordanceHover (∆colorBrandedAffordance600)
Avatar (hover)	Icon color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Label (hover)	Text color	∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Container (pressed)	Background color	∆colorBrandedAffordancePressed (∆colorBrandedAffordance700)
Avatar (pressed)	Icon color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Label (pressed)	Text color	∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Container (selected)	Background color	∆colorBrandedAffordanceSelected (∆colorBrandedAffordance500)
Avatar (selected)	Icon color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)
Label (selected)	Text color	∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)

Elevation

Element	Property	Value
Container	Shadow Color	∆surfaceBrandedRaisedShadowColor

Shape

Element	Property	Value
Condensed container	Small	∆shapeBrandedSmall
Extended container	Small	∆shapeBrandedSmall
Floating action menu container	Large	∆shapeBrandedLarge
Avatar	Small	∆shapeBrandedSmall

Spacing

No spacing considerations for themes.

Type

Element	Property	Value
Label	Font family	∆typeBrandedButtonFontFamily
Label	Font weight	∆typeBrandedButtonFontWeight
Label	Text transform	∆typeBrandedButtonTextTransform
Label	Character spacing	∆typeBrandedButtonCharacterSpacing

Placement

FABs can be placed and positioned inside of mobile and desktop experiences.

Mobile Placement

The standard placement for FABs is the lower right corner of the screen while also respecting ancestral padding of the top-level container. The FAB should not be positioned on the edge of the viewport/screen, but remain 24px off the right edge for mobile.

Desktop Placement

Behavior

Developer Docs

Vue Developer Docs

Component documentation coming soon!