-
Notifications
You must be signed in to change notification settings - Fork 6.8k
feat(button): add expanded state to extended FAB for smooth collapse/expand transitions #33041
Description
Feature Description
According to the Material Design 3 specs, an extended FAB should be able to smoothly transition between an extended state (capsule shape with text) and a collapsed state (circular shape with icon only) depending on scroll interactions or limited screen space.
I propose adding a new [expanded]="boolean" (default true) property specifically for the Extended FAB.
- The
extendedproperty defines themat-fabas an Extended FAB rather than a standard FAB. - The
expandedproperty defines its visual state (expanded capsule vs. collapsed circle).
This would apply the necessary CSS transitions when the text label visually disappears in the collapsed state.
Use Case
I want to implement an expandable/collapsible Navigation Rail.
When a user interacts with a Navigation Rail to expand/collapse it, the top FAB within that rail should smoothly animate between a collapsed regular FAB and an extended FAB with a text label. Currently, because mat-fab lacks an animatable expanded state, developers cannot easily recreate this fluid interaction without writing complex custom CSS overrides to hack the fab-label.
Having a native [expanded] property would allow developers to seamlessly bind the FAB's state to the Navigation Rail's drawer state, providing a polished and spec-compliant Material 3 experience out of the box.