←Back to Docs
Recipe
Floating Action Button Design
A persistent circular button anchored to the viewport edge that triggers a primary action. Built with Tailwind's fixed positioning and layered with a subtle violet glow for brand cohesion.
New Project
Structure
Anchor the button with fixed positioning and bottom-6 right-6 offsets. The circular shape comes from equal width and height with rounded-full.
Glow Effect
Apply shadow-lg shadow-[#8B5CF6]/40 to create the signature violet bloom. Increase opacity on hover for interactive feedback without JavaScript.
Accessibility
Always wrap the FAB in a <button> with an aria-label. Ensure sufficient contrast against background content by using a solid fill rather than transparency alone.