Extended Floating Action Button (Extended FAB)

Extended floating action buttons (Extended FABs) are more prominent than regular FABs. They feature both a text label and an icon to clarify the action. They can transform/collapse into standard FABs (icon-only) on scroll.

Introduction

Material Design 3 Expressive Extended FABs are perfect for screens with long, scrolling views that require persistent access to a primary action (e.g., checkout, publish post). They feature high-fidelity spring motion, shape-morphing physics on tap, and native support for internationalization (RTL). Unlike baseline Extended FABs, the modern Expressive spec replaces the deprecated baseline with the Small (56dp) variant utilizing Title Medium typography.

Anatomy

• Container: A rounded rectangular surface that wraps the inner layout. Hugs content dynamically by default.
• Icon (Optional): Intuitively represents the action. Replaced automatically with a spinner when loading.
• Label Text (Required): Describes the action clearly. Recommended to be 1–2 words at most. Avoids wrapping or truncation.
• State Layer: Shows interactive feedback overlay (hover, focus, pressed) using MD3 expressive ripples.

Variants

Sizes

The M3 Expressive specification defines three variants of Extended FABs:

• Small (56dp): Height 56dp. Replaces the deprecated baseline layout. Title Medium font size.
• Medium (80dp): Height 80dp. Title Large font size.
• Large (96dp): Height 96dp. Maximum prominence on spatial UIs or compact screen layouts. Headline Small font size.

Color Styles & Customizations

Extended FABs can map to three primary color container tokens: Primary, Secondary, and Tertiary. You can also utilize the lowered prop to reduce resting elevation when nesting inside app bars, or omit the icon completely for label-only FABs.

Features

Scroll Collapse & Controlled Mode

The Extended FAB can collapse into an icon-only pill-shaped FAB when scrolling down to temporarily occupy less screen space, and expand again when scrolling up. You can toggle this auto behavior via collapseOnScroll or manually control the state from outside via the collapsed prop.

Right-to-Left (RTL) Support

In right-to-left layout orientations (e.g. Arabic, Hebrew), Extended FABs automatically mirror their layout, positioning the icon to the right of the label text.

Container Transform (Morphing)

Using the newly added layoutId prop along with Framer Motion's Layout Projection, the Extended FAB can morph seamlessly into another surface (like a compose dialog, card, or panel).

Usage

Basic Usage

import { ExtendedFAB, Icon } from "@bug-on/m3-expressive";

<ExtendedFAB 
  label="Compose"
  icon={<Icon name="edit" />} 
  onClick={() => console.log("Click!")} 
/>

Auto Collapse on Scroll

import { ExtendedFAB, Icon } from "@bug-on/m3-expressive";

// Automatically collapses when scroll down passes 50px threshold
<ExtendedFAB 
  label="Compose"
  icon={<Icon name="edit" />} 
  collapseOnScroll
  scrollThreshold={50}
/>

Best Practices

Do

• Use only one Extended FAB per screen to maintain a clean visual hierarchy.
• Keep the label text to 1-2 words at most to prevent overcrowding.
• Place the Extended FAB above content panels or in consistent navigation rails.

Next.js Integration (asChild)

Use asChild to wrap Next.js Link with Extended FAB styling and collapse behavior.

import Link from "next/link";
import { ExtendedFAB, Icon } from "@bug-on/m3-expressive";

<ExtendedFAB asChild label="Compose" icon={<Icon name="edit" />}>
  <Link href="/compose">Compose</Link>
</ExtendedFAB>

Don't

• Don't use multiple Extended FABs on a single screen.
• Don't use baseline configurations (surface color, large-baseline button size) which are deprecated.
• Don't let the text label wrap into multiple lines.

Design Tokens

Measurements & Layout

Color Mapping

Accessibility

• ARIA Accessible Name: The aria-label automatically defaults to the required label prop. When collapsed, the aria-label remains present for screen readers.
• Interactive States: Keyboard navigation is fully supported out of the box (Tab focus, interaction via Enter or Space keys).
• Reduced Motion: Entrance, exit, and collapse width transitions respect standard systems' prefers-reduced-motion configurations.

API Reference

ExtendedFAB