by @alexstyl
✉️ Leave your feedback

← Back to Material Compose


. Since 0.1.0-dev15



Community Notes

<a href="" class="external" target="_blank">Material Design extended floating action button</a>.

The extended FAB is wider than a regular FAB, and it includes a text label.

!Extended floating action button image(

This extended FAB contains text and an optional icon that will be placed at the start. See FloatingActionButton for a FAB that just contains some content, typically an icon.



fun ExtendedFloatingActionButton(
    text: @Composable () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable (() -> Unit)? = null,
    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()


textText label displayed inside this FAB
onClickcallback invoked when this FAB is clicked
modifierModifier to be applied to this FAB
iconOptional icon for this FAB, typically this will be a Icon.
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. Will be used by text and iconography
elevationFloatingActionButtonElevation used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB
Previous ComponentExposedDropdownMenuBox
Next ComponentFilledTextField