Hi! Need any help?
We usually reply in a few minutes
FAB: the app's main action, with its speed dial
Floating Action Button vs. Chat Launcher vs. Back-to-Top
/ position: fixed · FloatingActionButton /
also called FAB, floating button, Messenger launcher (Intercom term), chat widget button, scroll-to-top button
“A round button at the bottom of the screen” is usually one of three things: a floating action button, a chat launcher, or a back-to-top button. A floating action button (FAB; Compose FloatingActionButton, Material UI <Fab>) is an app's main action, a “+” floating over the content that can fan out a speed dial of small labeled actions. A chat launcher is the round bubble that opens a support site's chat (Intercom calls it the Messenger launcher), often with a greeting bubble and a red unread badge, while a back-to-top button appears only after you scroll down. None of them is bottom navigation, the fixed row of tabs.
If you called it…
…you meant Floating Action Button vs. Chat Launcher vs. Back-to-Top.
Anatomy — every part, named
- 1Floating action button (FAB)
FloatingActionButton“The round plus button floating over the list” is a floating action button: the app's one main action, kept in the bottom-right corner while the content scrolls under it.
- 2Speed dial
<SpeedDial>“The little buttons that pop out of the plus” are a speed dial: three to six small round actions with labels that fan up out of the FAB.
- 3Chat launcher
alignment (Intercom)“The chat bubble in the corner of a website” is a chat launcher (Intercom: Messenger launcher; Zendesk: launcher): the round button that opens the support chat.
- 4Greeting bubble
“The little card that pops out saying hi” is a greeting bubble: a short note from the support team beside the launcher, with an avatar and a close mark.
- 5Back-to-top button
FloatButton.BackTop“The arrow that shows up after you scroll down” is a back-to-top button: hidden at the top of the page, it fades in past a scroll threshold and jumps you back up.
Prompt — paste into your agent
Add a floating action button (Jetpack Compose FloatingActionButton; Material UI <Fab>): a round accent button with a white plus, fixed to the bottom-right corner (position: fixed), opening a speed dial (<SpeedDial>) of three small labeled actions. Show a back-to-top button (Ant Design FloatButton.BackTop) only past 400 px of scroll. Stack any chat launcher with them in one FloatButton.Group above env(safe-area-inset-bottom), never covering content people need to tap.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my floating buttons (position: fixed, FloatingActionButton, <Fab>, <SpeedDial>, FloatButton.Group, FloatButton.BackTop, the Intercom or Zendesk launcher). Rule out: the button scrolling away with the page because an ancestor has transform or filter, which makes position: fixed stick to that ancestor instead of the screen; the button sitting on the bottom tab bar or under the iPhone home indicator because bottom ignores env(safe-area-inset-bottom) (which needs viewport-fit=cover); a chat launcher and a back-to-top button piled on the same spot instead of stacked in one FloatButton.Group or moved with the launcher's vertical_padding; the back-to-top button never showing because it listens to window scroll while the page scrolls inside a container (set target); the last list row or a Submit button hidden under the button with no bottom padding to clear it; speed dial actions with no visible labels or unreachable by keyboard; a z-index below a sticky footer or a dialog's scrim. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | position: fixed | with bottom and right, plus env(safe-area-inset-bottom) on phones |
| Jetpack Compose | FloatingActionButton | also SmallFloatingActionButton, LargeFloatingActionButton, and ExtendedFloatingActionButton with a label |
| Material UI | <Fab> | variant="extended" adds a text label |
| Material UI | <SpeedDial> | the small actions are <SpeedDialAction>; three to six of them |
| Ant Design | FloatButton.BackTop | appears after visibilityHeight, 400 px by default; stack several with FloatButton.Group |
| Intercom | custom_launcher_selector | opens the Messenger from your own button instead of the default launcher |