ExtendedFloatingActionButton

Functions summary

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

Material Design extended floating action button
Cmn

Functions

ExtendedFloatingActionButton

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

Material Design extended floating action button

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.

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

ExtendedFloatingActionButton(
    icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
    text = { Text("ADD TO BASKET") },
    onClick = { /*do something*/ },
)

If you want FAB’s container to have a fluid width (to be defined by its relationship to something else on screen, such as screen width or the layout grid) just apply an appropriate modifier. For example to fill the whole available width you can do:

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.ui.Modifier

ExtendedFloatingActionButton(
    icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
    text = { Text("FLUID FAB") },
    onClick = { /*do something*/ },
    modifier = Modifier.fillMaxWidth(),
)
Parameters
text: @Composable () -> Unit

Text label displayed inside this FAB
onClick: () -> Unit

callback invoked when this FAB is clicked
modifier: Modifier = Modifier

Modifier to be applied to this FAB
icon: (@Composable () -> Unit)? = null

Optional icon for this FAB, typically this will be a Icon.
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. Will be used by text and iconography
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.