Floating Action Button (FAB)

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)

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.