FloatingActionButton

Functions summary

Unit
@Composable
FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier,
    interactionSource: MutableInteractionSource?,
    shape: Shape,
    backgroundColor: Color,
    contentColor: Color,
    elevation: FloatingActionButtonElevation,
    content: @Composable () -> Unit
)

Material Design floating action button

Cmn

Functions

FloatingActionButton

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource? = null,
    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
): Unit

Material Design floating action button

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

Floating action button
image

This FAB is typically used with an Icon:

import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite

FloatingActionButton(onClick = { /*do something*/ }) {
    Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
}

See ExtendedFloatingActionButton for an extended FAB that contains text and an optional icon.

Parameters
onClick: () -> Unit

callback invoked when this FAB is clicked

modifier: Modifier = Modifier

Modifier to be applied to this FAB.

interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this FAB. You can use this to change the FAB's appearance or preview the FAB in different states. Note that if null is provided, interactions will still happen internally.

shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50))

The Shape of this FAB

backgroundColor: Color = MaterialTheme.colors.secondary

The background color. Use Color.Transparent to have no color

contentColor: Color = contentColorFor(backgroundColor)

The preferred content color for content inside this FAB

elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation()

FloatingActionButtonElevation used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB.

content: @Composable () -> Unit

the content of this FAB - this is typically an Icon.