Bottom App Bar

Bottom bar pairing actions with a FAB

A bottom app bar groups a small set of action icons at the bottom of the screen and commonly hosts a floating action button for the screen's primary action.

View source Material docs All components

Bottom App Bar demos rendered in Compose Playground — Pixel-accurate preview · light theme

Actions with a FAB

Leading action icons plus a trailing floating action button.

BottomAppBar(
    actions = {
        IconButton(onClick = {}) { Icon(Icons.Filled.Search, "Search") }
        IconButton(onClick = {}) { Icon(Icons.Filled.Favorite, "Favorite") }
        IconButton(onClick = {}) { Icon(Icons.Filled.Settings, "Settings") }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = {}) { Icon(Icons.Filled.Add, "Add") }
    }
)

Examples

Related components