Floating action buttons from the Kombai gallery: an expense app's New expense button, a sprint board's Add item button and an HR app's calendar-add button.
What is a floating action button?
A floating action button, or FAB, is a button that hovers over the content instead of sitting in the layout. It stays put while the page scrolls and holds the main action of the screen, like composing, adding or scanning. Some open a short menu of related actions.
- It is a circle with one icon, or a pill with an icon and a short verb.
- A shadow lifts it above the content, usually in the bottom right corner.
Floating action buttons show up across social feed, map, chat and dashboard screens.
When to use a floating action button
- One main actionThe screen exists to create something, like a message, a task or an expense.
- Long, scrolling listsThe action stays in reach no matter how far people scroll.
- Thumb reach on mobileA large target near the bottom of the screen, where a thumb rests.
When not to use one
- Several equal actionsPut them in a toolbar or a row of buttons instead.
- Destructive actionsDelete and archive shouldn't float over the content.
- No clear main actionSettings and detail pages rarely need one.
Anatomy of a floating action button
This one works. Close and reopen the menu, or tab to the button and press Enter. Escape closes the menu.
Expenses
March
- GroceriesToday$64.20
- Train passYesterday$38.00
- Dinner with AnaSplit 2 ways$26.00
- Coffee beansMon$14.50
- Resting
- Open
- Collapsed on scroll
- Keyboard focus
- ContainerRaised above the content
- IconOne clear symbol, like plus
- LabelOptional, makes it extended
- Action menuOptional, a few related actions
- StatesResting, open, collapsed, focus
Floating action button variants
We sorted every floating action button design in the Kombai gallery and found six patterns. Browse all 55 web and 35 mobile designs.
1. Round FABs
The default. A circle in the bottom corner with one icon, like plus, an alarm or a remote.
2. Extended FABs
A pill with an icon and a short verb, like Log Flow, Share or Compose, which reads faster than an icon alone.
3. Speed dials and action rows
One button that opens a short stack of related actions and becomes a close button, or a row of round actions like pass and like.
4. Map and filter pills
A floating Map, Show map or Filters pill over a list or a map, so the switch stays in reach while people scroll.
5. Help and chat launchers
A round button in the bottom corner that opens support chat or help articles, the most common FAB in the web designs.
6. Tab bar FABs
A raised button in the middle of the tab bar, usually a plus for posting or adding an item.
Where floating action buttons show up
Writing and editing
A compose or pencil button over an inbox, a reader or a document, always one tap from a new draft.
Filtering long lists
A Filter pill that stays on screen while a library or a search result scrolls under it.
Maps
Locate, search this area and scan buttons floating over the map, clear of the pins.
Long pages
A small arrow that jumps back to the top of a long page or down to the latest result.
Floating action button vs similar components
Build notes
- Use a <button> with a visible label or an aria-label, like "New expense".
- Use one per screen, for the action people take most.
- Make the hit area at least 44 by 44 points, even for a small round FAB.
- For a speed dial, set aria-expanded on the button and point aria-controls at the menu.
- Let Escape close an open speed dial and return focus to the button.
- Add bottom padding to the list, so the FAB never covers the last item.
FAQ
When should I use a floating action button?
When one action matters more than anything else on the screen, like composing a message or adding an expense, and people need it from anywhere in a long list. If the screen has no single main action, leave the FAB out.
Should a floating action button have a label?
A plus works on its own for creating something, because people know it. For anything else, use an extended FAB with a short verb, like Scan or Compose. Either way, give it an accessible name.
Do floating action buttons work on desktop web?
In the web designs in the Kombai gallery, the most common floating button is a help or chat launcher in the bottom corner. For a main action on a wide screen, a regular button in the header or toolbar is easier to find.
Where should a floating action button go?
Usually the bottom right, above the tab bar, where a thumb reaches it. Put it in the middle of the tab bar when creating is the main job of the app, and keep it from covering the last item in a list.
Related terms
All glossary terms · Browse 55 web and 35 mobile floating action button designs