Skip to main content
Frontend Glossary

UI components · Fundamentals

Floating Action Button

Also called: FAB, Floating button, Back-to-top button, FloatButton, Speed dial

A round button pinned to the bottom-right corner of the screen that stays put while the page scrolls, holding the most-used action on the current page.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Add a floating action button to the bottom-right corner of the page: a 56px circle with a dark background, a white plus icon, and a shadow, 24px from the right and bottom edges. Use fixed positioning so it doesn't scroll with the page. On hover, show a "New task" tooltip, and on click, open the new task modal. Leave 80px of empty space at the bottom of the page so it doesn't cover the last item.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Floating Action Button is what you need.

Use Floating Action Button when

  • A mobile or content feed page with one main action that should always be one tap away
  • A long page that needs a "Back to top" button available at all times
  • Links like support or feedback that should be on every page without taking up content space

Pick something else when

  • The page has several equally important actions; use a top toolbar or a button group

    Use insteadToolbarButton

  • An admin table page with pagination or a bulk action bar in the bottom-right, which the FAB would cover

  • Destructive actions like delete, which shouldn't be an always-there button you can hit by accident

    Use insteadButton

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Stacking four or five FABs in the bottom-right corner at once, like back to top, support, feedback, and create

  2. 02

    The FAB covers the last row of a list or the pagination, because no space was left at the bottom

  3. 03

    The button has only an icon and no tooltip, so users can't guess what it does

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A round icon button with fixed positioning and a shadow, optionally with a text label or a set of small buttons that expand on click.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A floating action button (FAB) is a round icon button pinned to the bottom-right corner of the screen with fixed positioning. It has a noticeable shadow, so it looks like it floats above the page content. It stays in place however the page scrolls, which makes it a good spot for the page's main action, like "New post," "Create," or "Contact support." The "Back to top" button and the live chat button in the bottom-right corner are variations of it. It can also expand into a set of small buttons when clicked, which is called a Speed Dial.

The most common problem with a FAB is covering content. It can hide the last row of a list, the pagination in the bottom-right of a table, or the bottom nav bar on a phone, so leave enough empty space at the bottom of the page. Use at most one main FAB per page. When you need several actions, use a Toolbar at the top of the page or regular buttons instead.

Developer info
Term ID
component-fab
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-float-btn
  • .ant-back-top
  • [class*="MuiFab-root"]
  • .el-backtop
  • .n-float-button
  • .n-back-top
  • .fixed.rounded-full:is(button, a)
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026