State of Compose 2023 results are in! Click here to learn more

← Back to Material Compose

FloatingActionButton

Component
in
Material
. Since 0.1.0-dev15

Overview

Code Examples

<a href="https://material.io/components/buttons-floating-action-button" class="external" target="_blank">Material Design floating action button</a>.

A floating action button (FAB) represents the primary action of a screen.

!Floating action button image(https://developer.android.com/images/reference/androidx/compose/material/floating-action-button.png)

This FAB is typically used with an Icon:

Overloads

FloatingActionButton

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
)

Parameters

NameDescription
onClickcallback invoked when this FAB is clicked
modifierModifier to be applied to this FAB.
interactionSourcethe MutableInteractionSource representing the stream of Interactions for this FAB. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this FAB in different Interactions.
shapeThe Shape of this FAB
backgroundColorThe background color. Use Color.Transparent to have no color
contentColorThe preferred content color for content inside this FAB
elevationFloatingActionButtonElevation used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB.
contentthe content of this FAB - this is typically an Icon