Floating action button

The primary action of a screen, in five sizes. The extended variant adds a label.

Category: Actions
API status: Expressive
Compose APIs: FloatingActionButton, SmallFloatingActionButton, MediumFloatingActionButton, LargeFloatingActionButton, ExtendedFloatingActionButton
Interactive page: https://m3e.ljzapps.app/#components/fab

When to use

Use a FAB for the single most important action on a screen, such as compose, create or add. Place it where it is easy to reach and keep it visible while content scrolls.

Collapse an extended FAB to its icon while the user scrolls down and expand it again when they scroll up.

Playground

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

Examples

Sizes

Small, regular, medium and large.

SmallFloatingActionButton(onClick = {}) { Icon(Icons.Rounded.Add, contentDescription = "Add") }
FloatingActionButton(onClick = {}) { Icon(Icons.Rounded.Add, contentDescription = "Add") }
MediumFloatingActionButton(onClick = {}) { Icon(Icons.Rounded.Add, contentDescription = "Add") }
LargeFloatingActionButton(onClick = {}) {
    Icon(
        imageVector = Icons.Rounded.Add,
        contentDescription = "Add",
        modifier = Modifier.size(FloatingActionButtonDefaults.LargeIconSize),
    )
}

Extended

Tap to collapse and expand.

var expanded by rememberSaveable { mutableStateOf(true) }

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

Parameters

Name	Type	Default	Description
`onClick`	`() -> Unit`		Called when the FAB is clicked.
`containerColor`	`Color`	`FloatingActionButtonDefaults.containerColor`	Use the container roles, such as primaryContainer.
`expanded`	`Boolean`	`true`	Extended FAB only. When false only the icon remains.
`elevation`	`FloatingActionButtonElevation`	`elevation()`	Shadow elevation for the FAB states.

Guidelines

Do:

Use one FAB per screen.
Keep the action constructive.

Don't:

Do not use a FAB for destructive actions.
Do not stack several FABs. Use the FAB menu.

Accessibility

A FAB with only an icon needs a contentDescription.
In the collapsed extended FAB the text is hidden visually but still exposed to screen readers when you keep the text slot.