Extended FAB Variants
Extended FABs are available in different color variants, each suitable for different contexts.
Extended FAB Width Options
Extended FABs can have fixed width (defined by content) or fluid width (defined by container).
Container: 400px width
Extended FAB Disabled
Disabled Extended FABs are visually distinct and non-interactive.
Extended FAB Positions
Extended FABs can be positioned in different corners of the screen. In a real application, they would be fixed to the viewport.
Animated Extended FAB
This Extended FAB demonstrates the entrance animation
Extended FAB Interaction
Demonstrates interactive behaviors of the Extended FAB.
Extended FAB Collapse on Scroll
Extended FABs can automatically collapse to a standard FAB when scrolling down and expand when scrolling up. This provides persistent access to the action while minimizing screen space usage.
This demo shows how an Extended FAB collapses when scrolling down and expands when scrolling up.
In a real application, the Extended FAB would be fixed to the viewport.
Scroll to see the Extended FAB collapse
This is a demonstration of the Extended FAB with collapseOnScroll: true.
Scroll down to see the FAB collapse into a standard FAB.
Scroll back up to see it expand again.
This behavior is useful in long scrolling views to save space while still providing access to the primary action.
Scrollable Content
When you scroll to the bottom, the Extended FAB should be expanded again.
Programmatic Collapse/Expand
Extended FABs can also be collapsed and expanded programmatically: