PenTool UIالعربيةBrowse the library

Floating action buttons · Mobile app

Floating action buttons in Mobile app: 7 designs — Paired Floating Actions · Draggable FAB · Extended FAB that Collapses · FAB that Morphs into a Panel

All Mobile app designs

Designs

RTL VerifiedLTR Verified Mobile app

Paired Floating Actions

A primary and a secondary action at different sizes and weights

Intermediate
Code Prompt
RTL VerifiedLTR Verified Mobile app

Draggable FAB

Drags freely, snaps to the nearest edge, and never leaves the screen

Advanced
Code Prompt
RTL VerifiedLTR Verified Mobile app

Extended FAB that Collapses

Starts with a label and collapses to an icon on scroll

Intermediate
Code Prompt
RTL VerifiedLTR Verified Mobile app

FAB that Morphs into a Panel

Expands from a circle into a form and returns on close

Advanced
Code Prompt
RTL VerifiedLTR Verified Mobile app

FAB with Progress Ring

An SVG ring computed from its own circumference, not a fixed width

Advanced
Code Prompt
RTL VerifiedLTR Verified Mobile app

Scroll-to-Top FAB

Appears after enough distance and returns smoothly — or instantly when motion is reduced

Intermediate
Code Prompt
RTL VerifiedLTR Verified Mobile app

Speed Dial FAB

Opens named actions in sequence, closing on Escape and on the scrim

Advanced
Code Prompt