Floating action button (FAB)

The round button hovering over the bottom-right corner of the screen, holding the one action that screen exists for.

the round plus button in the cornerthe big circle buttonFABfab buttonfloating plus buttoncircular action button bottom rightthe compose button in Gmailfloating round button that stays while you scroll

See it

Live demo coming soon

What it is

A Material Design invention: a circular button parked above the scrolling content on its own elevation layer, holding exactly one action. Compose in Gmail, new event in Calendar, add-a-thing in every CRUD app since. Sizes run mini (40px), regular (56px), large, and extended (a pill with an icon plus a short verb).

Reach for it on mobile and tablet screens with one obvious constructive action, ideally near the thumb. On desktop the bottom-right corner is far from where the eye already is, so a toolbar or header button usually wins.

Two things bite. A FAB covers content: it sits on top of the last row of the list, so pad the bottom of the scroll container by the button height plus its margin, and translate it upward when a snackbar or bottom sheet appears. And one per screen, always. Two round buttons in a corner means neither is primary, and a FAB that opens a menu of options has quietly turned back into an overflow menu wearing a circle.

Ask AI for it

Add a floating action button: a 56px circular button fixed to the bottom-right with 16px of margin from both edges, filled in the brand accent color, a centered 24px plus icon, a soft Material-style shadow that deepens on hover, and a scale-down press state. Keep it on its own stacking layer above the content, add bottom padding to the scroll container equal to the button height plus margin so it never covers the last row, and translate it up when a snackbar appears. Expand it into an extended FAB (a pill with the icon plus the label 'New task') while the user is at the top of the list, and collapse it back to a circle once they scroll down. Give it a descriptive aria-label and a visible focus ring, and use exactly one per screen.

You might have meant

tab barbottom sheetsnackbaroverflow menutoast