Floating Action Button

Design a Floating Action Button for a mobile interface. It should sit above the page content, anchored to a consistent corner, and read as the main action on the screen. Keep the shape compact and circular, with a single icon that makes the action understandable without a label.

Show how the FAB behaves in normal use and when interacted with. Include default, pressed, disabled, and loading states, plus an expanded state for cases where the action needs a short text label or tooltip. The interaction should feel fast and tactile, with clear feedback on tap.

Treat placement as part of the design, not an afterthought. The button should avoid covering key content, respect safe areas, and stay usable alongside bottom navigation, chat bars, or other persistent controls.

Position the FAB strategically to avoid obstructing important content yet staying readily accessible. For a fun twist, try animating the button's entrance or interaction!