<div class='type'>Composable Component</div>


Extended FABs help people take primary actions. They're wider than FABs to accommodate a text
label and larger target area.

<a id='references'></a>


<h2 id="largeextendedfloatingactionbutton-onclick-modifier-shape-containercolor-contentcolor-elevation-interactionsource-content">LargeExtendedFloatingActionButton</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMaterial3ExpressiveApi
@Composable
fun LargeExtendedFloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = FloatingActionButtonDefaults.largeExtendedFabShape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| onClick | called when this FAB is clicked |
| modifier | the `Modifier` to be applied to this FAB |
| shape | defines the shape of this FAB's container and shadow (when using `elevation`) |
| containerColor | the color used for the background of this FAB. Use `Color.Transparent` to have no color. |
| contentColor | the preferred color for content inside this FAB. Defaults to either the matching content color for `containerColor`, or to the current `LocalContentColor` if `containerColor` is not a color from the theme. |
| elevation | `FloatingActionButtonElevation` used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB. Additionally, when the container color is `ColorScheme.surface`, this controls the amount of primary color applied as an overlay. See also: `Surface`. |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s 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. |
| content | the content of this FAB, typically a `Text` label |


<hr class="docs-overload-divider">


<h2 id="largeextendedfloatingactionbutton-text-icon-onclick-modifier-expanded-shape-containercolor-contentcolor-elevation-interactionsource">LargeExtendedFloatingActionButton</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMaterial3ExpressiveApi
@Composable
fun LargeExtendedFloatingActionButton(
    text: @Composable () -> Unit,
    icon: @Composable () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    expanded: Boolean = true,
    shape: Shape = FloatingActionButtonDefaults.largeExtendedFabShape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource? = null,
) =
    ExtendedFloatingActionButton(
        text = text,
        icon = icon,
        onClick = onClick,
        textStyle = LargeExtendedFabTextStyle.value,
        minWidth = LargeExtendedFabMinimumWidth,
        minHeight = LargeExtendedFabMinimumHeight,
        startPadding = LargeExtendedFabPaddingStart,
        endPadding = LargeExtendedFabPaddingEnd,
        iconPadding = LargeExtendedFabIconPadding,
        modifier = modifier,
        expanded = expanded,
        shape = shape,
        containerColor = containerColor,
        contentColor = contentColor,
        elevation = elevation,
        interactionSource = interactionSource,
    )
```


#### Parameters

| | |
| --- | --- |
| text | label displayed inside this FAB |
| icon | icon for this FAB, typically an `Icon` |
| onClick | called when this FAB is clicked |
| modifier | the `Modifier` to be applied to this FAB |
| expanded | controls the expansion state of this FAB. In an expanded state, the FAB will show both the `icon` and `text`. In a collapsed state, the FAB will show only the `icon`. |
| shape | defines the shape of this FAB's container and shadow (when using `elevation`) |
| containerColor | the color used for the background of this FAB. Use `Color.Transparent` to have no color. |
| contentColor | the preferred color for content inside this FAB. Defaults to either the matching content color for `containerColor`, or to the current `LocalContentColor` if `containerColor` is not a color from the theme. |
| elevation | `FloatingActionButtonElevation` used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB. Additionally, when the container color is `ColorScheme.surface`, this controls the amount of primary color applied as an overlay. See also: `Surface`. |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s 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. |