Floating Action Button (FAB)

Planned

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.

Floating Action Button (FAB)

Anatomy

The essential parts 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.

Trigger (condensed)


  1. Raised container
  2. Avatar 40

Trigger (extended)

  1. Raised container
  2. Avatar 40
  3. Label — Button type

Floating action menu

  1. Raised container
  2. Avatar 40
  3. Secondary hit target
  4. Primary hit target 

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 (add, create, share, transfer, etc.)

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 (Floating action menu — primary CTA)

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 (Floating action menu — secondary CTA)

Element Property Value
Container (static) Background color None
Avatar (static) Background color ∆colorPlatformGray900
∆colorPlatformAlpha25
Avatar (static) Icon color ∆colorBrandedAffordanceAccessible
(∆colorBrandedAffordance700)
Label (static) Text color ∆colorBrandedAffordanceAccessible
(∆colorBrandedAffordance700)
Container (hover) Background color ∆colorBrandedHover
(∆colorBrandedAffordance100)
Avatar (hover) Background color None
Avatar (hover) Icon color ∆colorBrandedAffordanceAccessible
(∆colorBrandedAffordance700)
Label (hover) Text color ∆colorBrandedAffordanceAccessible
(∆colorBrandedAffordance700)
Container (pressed) Background color ∆colorBrandedPressed
(∆colorBrandedAffordance)
Avatar (pressed) Background color None
Avatar (pressed) Icon color ∆colorBrandedAffordanceOn
Label (pressed) Text color ∆colorBrandedAffordanceOn
Container (selected) Background color ∆colorBrandedSelected
(∆colorBrandedAffordance200)
Avatar (selected) Background color None
Avatar (selected) Icon color ∆colorBrandedAffordanceOn
Label (selected) Text color ∆colorBrandedAffordanceOn

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

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 (Floating action menu — primary CTA)

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 (Floating action menu — secondary CTA)

Element Property Value
Avatar (static) Background color ∆colorPlatformGray900
∆colorPlatformAlpha25
Avatar (static) Icon color ∆colorBrandedAffordanceAccessible
(∆colorBrandedAffordance700)
Label (static) Text color ∆colorBrandedAffordanceAccessible
(∆colorBrandedAffordance700)
Container (hover) Background color ∆colorBrandedHover
(∆colorBrandedAffordance100)
Avatar (hover) Icon color ∆colorBrandedAffordanceAccessible
(∆colorBrandedAffordance700)
Label (hover) Text color ∆colorBrandedAffordanceAccessible
(∆colorBrandedAffordance700)
Container (pressed) Background color ∆colorBrandedPressed
(∆colorBrandedAffordance)
Avatar (pressed) Icon color ∆colorBrandedAffordanceOn
Label (pressed) Text color ∆colorBrandedAffordanceOn
Container (selected) Background color ∆colorBrandedSelected
(∆colorBrandedAffordance200)
Avatar (selected) Icon color ∆colorBrandedAffordanceOn
Label (selected) Text color ∆colorBrandedAffordanceOn

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 using the standard placement or marquee placement.

Standard placement

The standard placement for FABs is the lower right corner of the screen while also respecting ancestral padding of the top-level container. In other words, the FAB should not be positioned on the edge of the viewport/screen, but remain 24px off the right edge for mobile as an example. Both mobile and desktop can utilize the standard placements. 

Marquee placement

The marquee placement allows the FAB to be positioned within the marquee, and is exclusive to the wider screen experiences. Mobile experiences should only utilize the standard placement.  When in the Marquee position, the FAB will not actually “Float” but be statically positioned inside the Marquee. 


Also when in this Desktop/Marquee position, any new context that the FAB might open is contained within the Widget content area.

Behavior

(motion and behavior content needed)

Developer Docs

Vue Developer Docs

Component documentation coming soon!