Floating Action Button

Small, regular, large, and extended FABs

The FAB represents the primary action of a screen. It comes in small, regular, and large sizes, plus an extended form that pairs an icon with a label.

View source Material docs All components

Floating Action Button demos rendered in Compose Playground — Pixel-accurate preview · light theme

Sizes & extended

SmallFloatingActionButton(onClick = {}) { Icon(Icons.Filled.Add, "Add") }
FloatingActionButton(onClick = {}) { Icon(Icons.Filled.Add, "Add") }
LargeFloatingActionButton(onClick = {}) { Icon(Icons.Filled.Add, "Add") }
ExtendedFloatingActionButton(
    onClick = {},
    icon = { Icon(Icons.Filled.Add, null) },
    text = { Text("Compose") }
)

Examples

Related components