Compose Unstyled 2.0 is out! Check the official announcement blog ->
Compose Component

FloatingActionButton

The FAB represents the most important action on a screen.

FloatingActionButton social preview

FloatingActionButtonSample

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun FloatingActionButtonSample() {
    // A FAB should have a tooltip associated with it.
    TooltipBox(
        positionProvider =
            TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
        tooltip = {
            PlainTooltip(
                modifier =
                    Modifier.semantics {
                        // TODO(b/496338253): Remove this modifier once bug where tooltip text is
                        //  not announced by a11y screen readers is resolved.
                        liveRegion = LiveRegionMode.Assertive
                        paneTitle = "Localized description"
                    }
            ) {
                Text("Localized description")
            }
        },
        state = rememberTooltipState(),
    ) {
        FloatingActionButton(onClick = { /* do something */ }) {
            Icon(Icons.Filled.Add, "Localized description")
        }
    }
}

Last updated: