Navigation & structure

FAB (Floating Action Button)

Q: How do people describe a FAB (Floating Action Button) in plain words?

the round plus floating in the bottom-right corner that circle that stays put while I scroll the ball that fans out into a few smaller action buttons

Q: How do I implement a FAB (Floating Action Button)?

Add a FAB: 56px circular primary-color button fixed bottom-right, offset by calc(16px + env(safe-area-inset-bottom)), shadow above scrolling content, aria-label naming the action, extra bottom padding on the list so last-row actions stay tappable. At most one per screen, for the single most important creative action.

A circular primary action fixed over content—usually bottom-right—reserved for the screen’s one main create action.

Also known as floating action button · round plus button · speed dial

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "FAB (Floating Action Button)".

Add a FAB: 56px circular primary-color button fixed bottom-right, offset by calc(16px + env(safe-area-inset-bottom)), shadow above scrolling content, aria-label naming the action, extra bottom padding on the list so last-row actions stay tappable. At most one per screen, for the single most important creative action.

Anatomy:
- FAB: About 56px circle; at most one floating primary action per screen.
- speed dial: Optional fan-out of secondary actions from the main FAB.
- inset offset: Clear home indicators and system gesture zones.

Preferred API / pattern: `custom fixed button / MUI Fab patterns`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Last list row covered by the FAB
○Avoid: Icon-only without aria-label
○Avoid: Destructive action as FAB
○Avoid: Ignoring safe area
○Avoid: Two FABs on one screen

In plain wordsHow people search for it

“the round plus floating in the bottom-right corner”“that circle that stays put while I scroll”“the ball that fans out into a few smaller action buttons”

AnatomyOpen for part names

FAB: About 56px circle; at most one floating primary action per screen.
speed dial: Optional fan-out of secondary actions from the main FAB.
inset offset: Clear home indicators and system gesture zones.

How to write itOpen for stack patterns

Web (HTML/CSS)position: fixed + border-radius: 50%

React + Tailwind + shadcn/uicustom fixed button / MUI Fab patterns

SwiftUIoverlay alignment + circular Button

Ant Design<FloatButton icon /> / FloatButton.Group

Notes

Material’s signature control means “the single most important action on this screen”—compose, post, add expense. One per screen, positive/create oriented; a delete FAB is a footgun. It steals hit area from list bottoms—pad the scroll content. Solid fill or shadow keeps it readable over busy backgrounds. Always give an aria-label; icon-only is mute to screen readers.

Common mistakesHumans and models trip here

Last list row covered by the FAB: bottom padding must clear FAB height + gap.
Icon-only without aria-label: screen readers announce “button”.
Destructive action as FAB: floating red delete is an accidental-tap magnet.
Ignoring safe area: sits under the home indicator.
Two FABs on one screen: same sin as two primary buttons.

More failure symptoms on AI broke it.

Related patterns

Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.Back to TopA control that appears after a long scroll and jumps the user back to the top of the page.

Spotted a wrong name or missing pattern?

Message on X