Skip to content

feat(button): add expanded state to extended FAB for smooth collapse/expand transitions #33041

@jexjws

Description

@jexjws

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 extended property defines the mat-fab as an Extended FAB rather than a standard FAB.
  • The expanded property 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: material/buttonfeatureLabel used to distinguish feature request from other issuesgemini-triagedLabel noting that an issue has been triaged by geminineeds triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions