Extended FAB

A floating action button with a text label, in four sizes, that collapses to its icon.

Category: Actions
API status: Expressive
Compose APIs: ExtendedFloatingActionButton, SmallExtendedFloatingActionButton, MediumExtendedFloatingActionButton, LargeExtendedFloatingActionButton
Interactive page: https://m3e.ljzapps.app/#components/extended-fab

When to use

Use an extended FAB when the action needs a label to be understood. Expand it at the top of a screen and collapse it to the icon while the user scrolls down, then expand it again on scroll up.

The text and icon overloads handle the expand and collapse animation. Sizes follow the regular FAB sizes.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Sizes

SmallExtendedFloatingActionButton(text = { Text("Small") }, icon = { Icon(Icons.Rounded.Edit, contentDescription = null) }, onClick = {})
ExtendedFloatingActionButton(text = { Text("Regular") }, icon = { Icon(Icons.Rounded.Edit, contentDescription = null) }, onClick = {})
MediumExtendedFloatingActionButton(text = { Text("Medium") }, icon = { Icon(Icons.Rounded.Edit, contentDescription = null) }, onClick = {})
LargeExtendedFloatingActionButton(text = { Text("Large") }, icon = { Icon(Icons.Rounded.Edit, contentDescription = null) }, onClick = {})

Collapse and expand

Tap the button.

var expanded by rememberSaveable { mutableStateOf(true) }

ExtendedFloatingActionButton(
    text = { Text("New message") },
    icon = { Icon(Icons.Rounded.Edit, contentDescription = null) },
    expanded = expanded,
    onClick = { expanded = !expanded },
)

Parameters

Name	Type	Default	Description
`text`	`@Composable () -> Unit`		The label.
`icon`	`@Composable () -> Unit`		The icon, shown in both states.
`expanded`	`Boolean`	`true`	When false only the icon remains.
`containerColor`	`Color`	`FloatingActionButtonDefaults.containerColor`	Use a container color role.

Guidelines

Do:

Use for the primary action only.
Collapse on scroll.

Don't:

Do not use long labels.
Do not show it with another FAB.

Accessibility

Keep the text slot even when collapsed so the action keeps its accessible name.
The label should start with a verb.