Floating Action Button

Quick implementation

.fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.72 0.19 265), oklch(0.62 0.19 276));
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 0.5rem 1.5rem oklch(0.72 0.19 265 / 0.3);
  transition: all 0.2s ease;
  z-index: 100;
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 0.75rem 2rem oklch(0.72 0.19 265 / 0.4);
}

.fab:active {
  transform: scale(0.95);
}

.fab:focus-visible {
  outline: 2px solid oklch(0.72 0.19 265);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .fab {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer specializing in fixed positioning, stacking contexts, and mobile UX.

Your goal: Create a floating action button (FAB) component that stays fixed in the viewport corner, remains accessible above other content, and provides smooth interactive feedback.

Technical constraints:
1. Use position: fixed with bottom and right coordinates (bottom: 2rem, right: 2rem)
2. Button should be circular (border-radius: 50%) with equal width/height
3. Size should be 3.5rem on desktop, 3rem on mobile (< 640px)
4. Must have high z-index (100) to float above content
5. Gradient background with oklch() colors
6. Drop shadow should match primary color with opacity
7. Hover state: scale(1.1) with enhanced shadow
8. Active state: scale(0.95) for tactile press feedback
9. Must be keyboard accessible with :focus-visible outline
10. Icon/content should be centered using flexbox

Vanilla implementation:
- Create button.fab with fixed positioning
- Use border-radius: 50% for perfect circle
- Add gradient background matching site accent color
- Implement :hover with transform: scale(1.1)
- Add :active state with scale(0.95)
- Include media query for mobile sizing
- Set z-index >= 100 to stay above modal dialogs

React implementation:
- Create FAB component with icon and onClick handler
- Support multiple action variants (primary, danger, etc.)
- Use CSS Modules for positioning styles
- Support sub-actions menu (expandable action menu)
- Handle scrolling with scroll listener to show/hide FAB
- Create FabMenu component for multi-action FAB

Edge cases to handle:
1. Mobile keyboard: FAB may be hidden by software keyboard; consider reducing bottom on mobile
2. Content overlap: ensure FAB doesn't block critical interactive elements
3. Fixed elements: FAB with position: fixed can cause layout shift; use will-change sparingly
4. Safe areas: on iPhone notch/Dynamic Island, adjust positioning with safe-area-inset
5. Multiple FABs: if multiple buttons needed, create expandable menu
6. Accessibility: always include aria-label describing the button's action
7. Touch targets: min 44px height/width on mobile for accessibility

Why this matters in 2026

Floating action buttons are the primary affordance for the most important user action on a page. In Gmail, it's "Compose." In Slack, it's "New Message." In a notes app, it's "New Note." The FAB is designed to be always accessible, always visible, and impossible to miss—the ultimate CTA.

In 2026, mobile-first design is default. The FAB is perfect for mobile because it takes up minimal space, works with one-handed thumb navigation, and is immediately discoverable. On desktop, it avoids clutter while remaining prominent. The FAB is one of the few UI patterns that works equally well on all screen sizes.

The logic

The FAB uses position: fixed to stay in the viewport corner regardless of scrolling. The coordinates bottom: 2rem; right: 2rem position it in the bottom-right corner with safe spacing from the edge. The border-radius: 50% creates a perfect circle by making the radius equal to half the width/height.

The z-index of 100 ensures the FAB floats above most page content, but stays below modal dialogs (which typically use z-index: 1000+). The gradient background uses the site's accent colors, and the drop shadow reinforces the floating effect. On hover, transform: scale(1.1) enlarges the button by 10%, drawing attention. On active (click), scale(0.95) compresses it, providing tactile feedback. The media query reduces size on mobile to maintain proportions on smaller screens.

Accessibility & performance

Accessibility: The FAB must have an aria-label describing its action ("Create new item", "Compose message", etc.). The focus-visible outline is essential for keyboard navigation. On mobile, ensure the FAB doesn't block critical content or interactive elements. Consider implementing a "scroll-to-hide" pattern where the FAB hides when scrolling down and shows when scrolling up, reducing screen clutter.

Performance: Position: fixed doesn't cause layout recalculations—it's off the normal flow. The transform: scale() transition is GPU-accelerated and has zero paint cost. The box-shadow is slightly more expensive, but acceptable for a single element. Avoid using position: fixed on multiple elements or enabling will-change on the FAB unless necessary, as it can impact scrolling performance on mobile.