FAB (Floating Action Button)
UI ComponentsA circular button that floats above the UI, typically in the bottom-right corner, representing the primary action of a screen.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for FAB (Floating Action Button) coming soon.
How It Works in Apps/Websites
FABs are prominent circular buttons that float above content, usually fixed to the bottom-right corner. They represent the single most important action on a screen (compose email, add item, create new). Can expand to reveal related actions (speed dial). Often has shadow for elevation effect.
How AI Interprets This Term
When you say 'FAB' or 'floating action button', AI expects: a circular button (56px diameter standard, 40px mini), fixed position bottom-right, with prominent shadow. Contains a single icon (usually +, pencil, or primary action icon). Accent/primary color fill with white icon.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a FAB with a plus icon for adding new items
Design a FAB: 56px circular, positioned 16px from bottom-right, blue (#3b82f6) background, white + icon (24px), shadow (0 4px 6px rgba(0,0,0,0.1)). On hover, slight scale up. Include ripple effect on click.
Show standard FAB (icon only) vs extended FAB ('Compose' with icon and label) vs speed dial (expanding to reveal sub-actions)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •One primary action per screen
- •Create/compose actions
- •Mobile apps
- •Material Design interfaces
When NOT to Use
- •Desktop-only interfaces
- •Multiple equally important actions
- •Every screen (should be selective)
Related Terms
Icon Button
A button that displays only an icon without visible text, used for common actions where the icon meaning is universally understood.
Primary Button
The main action button on a page, designed to draw attention and guide users toward the most important action.