← Back to Material Compose
FloatingActionButton
Component
in
Material
. Since 0.1.0-dev15Overview
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
Name | Description |
---|---|
onClick | callback invoked when this FAB is clicked |
modifier | Modifier to be applied to this FAB. |
interactionSource | the 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. |
shape | The Shape of this FAB |
backgroundColor | The background color. Use Color.Transparent to have no color |
contentColor | The preferred content color for content inside this FAB |
elevation | FloatingActionButtonElevation used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB. |
content | the content of this FAB - this is typically an Icon |