Floating action button (FAB)

Overview

A floating action button (FAB) is a rounded, prominent button that typically appears in the bottom-right corner of a mobile interface and performs the primary or most frequent action users take within that screen or context. The FAB remains visible while users scroll, providing constant access to the primary action without requiring navigation to a menu or toolbar. Originally popularized by Google's Material Design system, FABs are designed to stand out visually through elevated positioning, distinct color, and scale, making them impossible to miss and signaling their importance relative to other interface elements. FABs often expand into related action menus when pressed, providing access to secondary actions while maintaining visual emphasis on the primary action.

Why is the Floating Action Button Valuable?

The FAB provides prominent, always-accessible placement for the most important user action, ensuring users can consistently find and trigger the primary action without searching through menus or navigation structures. On mobile devices where screen space is limited and navigation areas are constrained, the FAB enables primary actions to be discoverable and accessible without consuming valuable vertical space. The FAB's visual prominence and distinctive appearance help users understand the primary purpose of the screen or feature—a well-designed interface will have one clear FAB whose action matches the primary user goal. The persistent visibility of the FAB encourages action, particularly important for conversion-focused features like "Create Item," "Send Message," or "Make Reservation."

When Should You Use a Floating Action Button?

Floating action buttons should be used strategically for primary actions and should rarely appear more than one per screen. Key use cases include:

• Primary creation actions: FABs are ideal for actions that create new content or items, such as "Create Task," "New Note," "Start Conversation," or "Add Item to List." These actions are usually primary reasons users visit the screen.

• Primary communication actions: For messaging, email, or communication-focused interfaces, FABs work well for "Send Message," "Reply," or "Compose" actions that are primary user intents.

• Quick access to important features: When a feature is frequently used and valuable enough to warrant persistent accessibility, a FAB ensures users can access it quickly from any screen without navigating to a menu.

• Mobile-first interfaces: FABs are particularly valuable on mobile where screen space is limited and persistent navigation is difficult. On desktop, primary actions are typically accessed through header buttons or menus.

What Are the Drawbacks of Floating Action Buttons?

Overuse of FABs creates visual clutter and diminishes their effectiveness—when every screen has multiple FABs, none feel particularly important or prominent. FABs can obscure content on the screen, particularly on mobile devices where screens are small and floating buttons take up valuable space. Poorly designed FABs can be confusing if their action isn't clearly indicated through iconography or labels, leading to accidental activation or users struggling to understand the button's purpose. Additionally, FABs that remain visible across many screens may feel out of place if the primary action varies by screen—users expect FAB actions to remain consistent throughout an interface.

Best Practices for Implementing Floating Action Buttons

Effective FAB implementation requires careful consideration of context, action importance, and visual clarity:

• Use one FAB per screen maximum: Reserve FAB placement for the single most important action on a screen. If multiple actions seem equally important, that suggests the interface may need reorganization to establish clearer primary actions.

• Choose icons and labels that clearly indicate action: Use standard icons that users will recognize, or combine icons with text labels if the icon alone might be ambiguous. Test with users to ensure the action intent is immediately clear.

• Ensure the FAB performs the expected action: The action triggered by the FAB should match user expectations based on the icon and context. Unexpected behaviors undermine trust and create frustration.

• Consider expandable FABs for related actions: If users need quick access to related secondary actions, expandable FABs can provide access to multiple actions while maintaining visual prominence for the primary action.

• Make FABs accessible and touch-friendly: Ensure FABs are large enough to tap easily on mobile, typically at least 48-56 density-independent pixels. Provide clear focus states and ensure the button is keyboard accessible on desktop.

• Vary FAB styling meaningfully: Use different colors or styles to indicate different action categories—for example, destructive actions like "Delete" might have different styling than constructive actions like "Create."

The floating action button remains a valuable interface pattern when used thoughtfully for genuinely primary actions, providing visibility and accessibility that encourages user engagement with your most important features.