← Back to Material Compose
ExtendedFloatingActionButton
Component
in
Material
. Since 0.1.0-dev15
Overview
Examples
Community Notes
<a href="https://material.io/components/buttons-floating-action-button#extended-fab" 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(https://developer.android.com/images/reference/androidx/compose/material/extended-floating-action-button.png)
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.
Overloads
ExtendedFloatingActionButton
@Composable
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()
)
Parameters
| Name | Description |
|---|---|
text | Text label displayed inside this FAB |
onClick | callback invoked when this FAB is clicked |
modifier | Modifier to be applied to this FAB |
icon | Optional icon for this FAB, typically this will be a Icon. |
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. Will be used by text and iconography |
elevation | FloatingActionButtonElevation used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB |
Previous Component← ExposedDropdownMenuBox
Next ComponentFilledTextField →