Floating Action Button (FAB)
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 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)

- Raised container
- Avatar 40
Trigger (extended)

- Raised container
- Avatar 40
- Label — Button type
Floating action menu

- Raised container
- Avatar 40
- Secondary hit target
- 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)
States



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.
Developer Docs
Vue Developer DocsComponent documentation coming soon!