Mokera

Tech Sheets

mokelab

How to add action button to TopBar in Jetpack Compose

Last updated:2024-07-10

To add an action to TopAppBar in Jetpack Compose, use IconButton in actions param.

Scaffold(
  topBar = {
    TopAppBar(
      title = { Text("Title") },
      actions = {
        IconButton(onClick = { /*TODO*/ }) {
          Icon(
            imageVector = Icons.Default.Send,
            contentDescription = "Send",
          )
        }
      }
    )
  }
) { paddingValues -> 
}

The preview will look like this:

Back