What is FAB (Floating Action Button)?

A Floating Action Button (FAB) is a circular button that floats above the UI, usually in the bottom-right corner, representing the primary action on a screen. Think Gmail's compose button or Google Maps' directions button. It's always visible and accessible, making the most important action obvious. Introduced by Material Design, now common across mobile apps.

When Should You Use This?

Use FABs when there's one clear primary action users perform frequently on a screen—like "Compose" in email, "Add" in to-do lists, or "Create" in note apps. The action should be constructive (creating something) not destructive (deleting). Avoid if there are multiple equally important actions or if the primary action changes per screen.

Common Mistakes to Avoid

• •Multiple FABs—there should only be one primary action button
• •Using for secondary actions—FAB is for the most important action only
• •No label—some users don't understand icon-only buttons, consider adding text
• •Blocking content—FAB shouldn't cover important UI elements
• •Using on desktop—FABs are primarily a mobile pattern

Real-World Examples

• •Gmail mobile—circular "Compose" button for new email
• •Google Keep—"+" FAB to create new note
• •Twitter—FAB for composing new tweet
• •Todoist—"+" button to add new task