{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

FloatingActionButtonKt

public final class FloatingActionButtonKt


Summary

Public methods

static final void
@Composable
ExtendedFloatingActionButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design extended floating action button.

static final void
@Composable
ExtendedFloatingActionButton(
    @Composable @NonNull Function0<Unit> text,
    @Composable @NonNull Function0<Unit> icon,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean expanded,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource
)

Material Design extended floating action button.

static final void
@Composable
FloatingActionButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design floating action button.

static final void
@Composable
LargeFloatingActionButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design large floating action button.

static final void
@Composable
SmallFloatingActionButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design small floating action button.

Public methods

ExtendedFloatingActionButton

@Composable
public static final void ExtendedFloatingActionButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design extended floating action button.

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

Extended FAB image

The other extended floating action button overload supports a text label and icon.

import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Text

ExtendedFloatingActionButton(onClick = { /* do something */ }) {
    Text(text = "Extended FAB")
}
Parameters
@NonNull Function0<Unit> onClick

called when this FAB is clicked

@NonNull Modifier modifier

the Modifier to be applied to this FAB

@NonNull Shape shape

defines the shape of this FAB's container and shadow (when using elevation)

@NonNull Color containerColor

the color used for the background of this FAB. Use Color.Transparent to have no color.

@NonNull 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.

@NonNull FloatingActionButtonElevation 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.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this FAB. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this FAB in different states.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content

the content of this FAB, typically a Text label

ExtendedFloatingActionButton

@Composable
public static final void ExtendedFloatingActionButton(
    @Composable @NonNull Function0<Unit> text,
    @Composable @NonNull Function0<Unit> icon,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean expanded,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource
)

Material Design extended floating action button.

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

Extended FAB image

The other extended floating action button overload is for FABs without an icon.

Default content description for accessibility is extended from the extended fabs icon. For custom behavior, you can provide your own via Modifier.semantics.

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

ExtendedFloatingActionButton(
    onClick = { /* do something */ },
    icon = { Icon(Icons.Filled.Add, "Localized description") },
    text = { Text(text = "Extended FAB") },
)
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.FabPosition
import androidx.compose.material.Scaffold
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val listState = rememberLazyListState()
// The FAB is initially expanded. Once the first visible item is past the first item we
// collapse the FAB. We use a remembered derived state to minimize unnecessary compositions.
val expandedFab by remember {
    derivedStateOf {
        listState.firstVisibleItemIndex == 0
    }
}
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            onClick = { /* do something */ },
            expanded = expandedFab,
            icon = { Icon(Icons.Filled.Add, "Localized Description") },
            text = { Text(text = "Extended FAB") },
        )
    },
    isFloatingActionButtonDocked = false,
    floatingActionButtonPosition = FabPosition.End,
) {
    LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
        for (index in 0 until 100) {
            item {
                Text(
                    text = "List item - $index",
                    modifier = Modifier.padding(24.dp)
                )
            }
        }
    }
}
Parameters
@Composable @NonNull Function0<Unit> text

label displayed inside this FAB

@Composable @NonNull Function0<Unit> icon

optional icon for this FAB, typically an Icon

@NonNull Function0<Unit> onClick

called when this FAB is clicked

@NonNull Modifier modifier

the Modifier to be applied to this FAB

boolean 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.

@NonNull Shape shape

defines the shape of this FAB's container and shadow (when using elevation)

@NonNull Color containerColor

the color used for the background of this FAB. Use Color.Transparent to have no color.

@NonNull 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.

@NonNull FloatingActionButtonElevation 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.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this FAB. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this FAB in different states.

FloatingActionButton

@Composable
public static final void FloatingActionButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design floating action button.

The FAB represents the most important action on a screen. It puts key actions within reach.

FAB image

FAB typically contains an icon, for a FAB with text and an icon, see ExtendedFloatingActionButton.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon

FloatingActionButton(
    onClick = { /* do something */ },
) {
    Icon(Icons.Filled.Add, "Localized description")
}
Parameters
@NonNull Function0<Unit> onClick

called when this FAB is clicked

@NonNull Modifier modifier

the Modifier to be applied to this FAB

@NonNull Shape shape

defines the shape of this FAB's container and shadow (when using elevation)

@NonNull Color containerColor

the color used for the background of this FAB. Use Color.Transparent to have no color.

@NonNull 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.

@NonNull FloatingActionButtonElevation 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.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this FAB. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this FAB in different states.

@Composable @NonNull Function0<Unit> content

the content of this FAB, typically an Icon

LargeFloatingActionButton

@Composable
public static final void LargeFloatingActionButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design large floating action button.

The FAB represents the most important action on a screen. It puts key actions within reach.

Large FAB image

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.LargeFloatingActionButton
import androidx.compose.ui.Modifier

LargeFloatingActionButton(
    onClick = { /* do something */ },
) {
    Icon(
        Icons.Filled.Add,
        contentDescription = "Localized description",
        modifier = Modifier.size(FloatingActionButtonDefaults.LargeIconSize),
    )
}
Parameters
@NonNull Function0<Unit> onClick

called when this FAB is clicked

@NonNull Modifier modifier

the Modifier to be applied to this FAB

@NonNull Shape shape

defines the shape of this FAB's container and shadow (when using elevation)

@NonNull Color containerColor

the color used for the background of this FAB. Use Color.Transparent to have no color.

@NonNull 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.

@NonNull FloatingActionButtonElevation 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.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this FAB. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this FAB in different states.

@Composable @NonNull Function0<Unit> content

the content of this FAB, typically an Icon

SmallFloatingActionButton

@Composable
public static final void SmallFloatingActionButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull FloatingActionButtonElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design small floating action button.

The FAB represents the most important action on a screen. It puts key actions within reach.

Small FAB image

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.SmallFloatingActionButton

SmallFloatingActionButton(
    onClick = { /* do something */ },
) {
    Icon(Icons.Filled.Add, contentDescription = "Localized description")
}
Parameters
@NonNull Function0<Unit> onClick

called when this FAB is clicked

@NonNull Modifier modifier

the Modifier to be applied to this FAB

@NonNull Shape shape

defines the shape of this FAB's container and shadow (when using elevation)

@NonNull Color containerColor

the color used for the background of this FAB. Use Color.Transparent to have no color.

@NonNull 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.

@NonNull FloatingActionButtonElevation 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.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this FAB. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this FAB in different states.

@Composable @NonNull Function0<Unit> content

the content of this FAB, typically an Icon