What is a floating action button in UX design?
A floating action button, commonly abbreviated as FAB, is a circular button that floats above the interface, typically fixed to a lower corner of the screen, and remains visible as the user scrolls. It provides persistent access to the primary action available on a given screen. FABs originate from Google's Material Design system and are commonly used in mobile interfaces for actions like composing a message, creating a new item, or adding content.
When should you use a floating action button?
FABs work best when there is a single clear primary action that users need frequent access to across the entire screen, and when that action is constructive rather than destructive. Creating a new item, composing a message, or adding content are appropriate FAB actions. Destructive or irreversible actions like delete should not be FABs because the persistent visibility and prominent size increase the risk of accidental activation. FABs are most effective in mobile interfaces where screen space is limited and bottom-of-screen placement aligns with natural thumb reach, consistent with Fitts's law.
What are common floating action button mistakes?
Using multiple FABs on the same screen creates visual competition and contradicts the principle that a FAB represents the single most important action. FABs that cover important content as users scroll cause frustration, particularly in lists or feeds where the last item may be permanently obscured. Using a FAB for secondary or infrequent actions wastes its prominence. On desktop interfaces, FABs often feel out of place because desktop conventions favor top-of-screen or inline action placement rather than floating overlaid buttons.