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

```kotlin
@ExperimentalMaterial3ExpressiveApi
object FloatingToolbarDefaults
```

Contains default values used for the floating toolbar implementations.

## Properties

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

```kotlin
val ContainerSize: Dp
```

Default size used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) and [VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar) container

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

```kotlin
val ContainerExpandedElevation: Dp =  // TODO read from token
```

Default expanded elevation used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) and [VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar)

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

```kotlin
val ContainerCollapsedElevation: Dp =  // TODO read from token
```

Default collapsed elevation used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) and
[VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar)

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

```kotlin
val ContainerExpandedElevationWithFab: Dp =  // TODO read from token
```

Default expanded elevation used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) and [VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar)
with FAB.

This elevation will only affect the toolbar part of the component. The FAB that is provided
in a slot will have its own elevation and can be controlled independently.

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

```kotlin
val ContainerCollapsedElevationWithFab: Dp =  // TODO read from token
```

Default collapsed elevation used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) and
[VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar) with FAB.

This elevation will only affect the toolbar part of the component. The FAB that is provided
in a slot will have its own elevation and can be controlled independently.

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

```kotlin
val ContainerShape: Shape
```

Default shape used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) and [VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar)

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

```kotlin
val ContentPadding =
    PaddingValues(
        start = FloatingToolbarTokens.ContainerLeadingSpace,
        top = FloatingToolbarTokens.ContainerLeadingSpace,
        end = FloatingToolbarTokens.ContainerTrailingSpace,
        bottom = FloatingToolbarTokens.ContainerTrailingSpace,
    )
```

Default padding used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) and [VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar) when
content are default size (24dp) icons in [IconButton](/jetpack-compose/androidx.compose.material3/material3/components/IconButton) that meet the minimum touch target
(48.dp).

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

```kotlin
val ScreenOffset = FloatingToolbarTokens.ContainerExternalPadding
```

Default offset from the edge of the screen used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) and
[VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar).

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

```kotlin
val ScrollDistanceThreshold: Dp
```

A default threshold in [Dp](/jetpack-compose/androidx.compose.ui/ui-unit/classes/Dp) for the content's scrolling that defines when the toolbar should
be collapsed or expanded.

## Functions

<h2 id="animationspec">animationSpec</h2>

```kotlin
@Composable
    fun <T> animationSpec(): FiniteAnimationSpec<T>
```

Returns a default animation spec used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar)s and
[VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar)s.

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

<h2 id="exitalwaysscrollbehavior-exitdirection-state-snapanimationspec-flinganimationspec">exitAlwaysScrollBehavior</h2>

```kotlin
@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun exitAlwaysScrollBehavior(
        exitDirection: FloatingToolbarExitDirection,
        state: FloatingToolbarState = rememberFloatingToolbarState(),
        snapAnimationSpec: AnimationSpec<Float> = MotionSchemeKeyTokens.DefaultEffects.value(),
        flingAnimationSpec: DecayAnimationSpec<Float> = rememberSplineBasedDecay(),
    ): FloatingToolbarScrollBehavior
```

Returns a [FloatingToolbarScrollBehavior](/jetpack-compose/androidx.compose.material3/material3/interfaces/FloatingToolbarScrollBehavior). A floating toolbar that is set up with this
[FloatingToolbarScrollBehavior](/jetpack-compose/androidx.compose.material3/material3/interfaces/FloatingToolbarScrollBehavior) will immediately collapse when the content is pulled up, and
will immediately appear when the content is pulled down.

#### Parameters

| | |
| --- | --- |
| exitDirection | indicates the direction towards which the floating toolbar exits the screen |
| state | the state object to be used to control or observe the floating toolbar's scroll state. See [rememberFloatingToolbarState](/jetpack-compose/androidx.compose.material3/material3/composable-functions/rememberFloatingToolbarState) for a state that is remembered across compositions. |
| snapAnimationSpec | an [AnimationSpec](/jetpack-compose/androidx.compose.animation/animation-core/interfaces/AnimationSpec) that defines how the floating toolbar snaps to either fully collapsed or fully extended state when a fling or a drag scrolled it into an intermediate position |
| flingAnimationSpec | an [DecayAnimationSpec](/jetpack-compose/androidx.compose.animation/animation-core/interfaces/DecayAnimationSpec) that defines how to fling the floating app bar when the user flings the toolbar itself, or the content below it |

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

<h2 id="horizontalentertransition-expandfrom">horizontalEnterTransition</h2>

```kotlin
@Composable
    fun horizontalEnterTransition(expandFrom: Alignment.Horizontal) =
        expandHorizontally(animationSpec = animationSpec(), expandFrom = expandFrom)
```

Default enter transition used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) when expanding

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

<h2 id="verticalentertransition-expandfrom">verticalEnterTransition</h2>

```kotlin
@Composable
    fun verticalEnterTransition(expandFrom: Alignment.Vertical) =
        expandVertically(animationSpec = animationSpec(), expandFrom = expandFrom)
```

Default enter transition used for [VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar) when expanding

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

<h2 id="horizontalexittransition-shrinktowards">horizontalExitTransition</h2>

```kotlin
@Composable
    fun horizontalExitTransition(shrinkTowards: Alignment.Horizontal) =
        shrinkHorizontally(animationSpec = animationSpec(), shrinkTowards = shrinkTowards)
```

Default exit transition used for [HorizontalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/HorizontalFloatingToolbar) when shrinking

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

<h2 id="verticalexittransition-shrinktowards">verticalExitTransition</h2>

```kotlin
@Composable
    fun verticalExitTransition(shrinkTowards: Alignment.Vertical) =
        shrinkVertically(animationSpec = animationSpec(), shrinkTowards = shrinkTowards)
```

Default exit transition used for [VerticalFloatingToolbar](/jetpack-compose/androidx.compose.material3/material3/components/VerticalFloatingToolbar) when shrinking

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

<h2 id="standardfloatingtoolbarcolors">standardFloatingToolbarColors</h2>

```kotlin
@Composable
    fun standardFloatingToolbarColors(): FloatingToolbarColors
```

Creates a [FloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) that represents the default standard colors used in the
various floating toolbars.

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

<h2 id="vibrantfloatingtoolbarcolors">vibrantFloatingToolbarColors</h2>

```kotlin
@Composable
    fun vibrantFloatingToolbarColors(): FloatingToolbarColors
```

Creates a [FloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) that represents the default vibrant colors used in the
various floating toolbars.

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

<h2 id="standardfloatingtoolbarcolors-toolbarcontainercolor-toolbarcontentcolor-fabcontainercolor-fabcontentcolor">standardFloatingToolbarColors</h2>

```kotlin
@Composable
    fun standardFloatingToolbarColors(
        toolbarContainerColor: Color = Color.Unspecified,
        toolbarContentColor: Color = Color.Unspecified,
        fabContainerColor: Color = Color.Unspecified,
        fabContentColor: Color = Color.Unspecified,
    ): FloatingToolbarColors
```

Creates a [FloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) that represents the default standard colors used in the
various floating toolbars.

#### Parameters

| | |
| --- | --- |
| toolbarContainerColor | the container color for the floating toolbar. |
| toolbarContentColor | the content color for the floating toolbar. |
| fabContainerColor | the container color for an adjacent floating action button. |
| fabContentColor | the content color for an adjacent floating action button. |

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

<h2 id="vibrantfloatingtoolbarcolors-toolbarcontainercolor-toolbarcontentcolor-fabcontainercolor-fabcontentcolor">vibrantFloatingToolbarColors</h2>

```kotlin
@Composable
    fun vibrantFloatingToolbarColors(
        toolbarContainerColor: Color = Color.Unspecified,
        toolbarContentColor: Color = Color.Unspecified,
        fabContainerColor: Color = Color.Unspecified,
        fabContentColor: Color = Color.Unspecified,
    ): FloatingToolbarColors
```

Creates a [FloatingToolbarColors](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) that represents the default vibrant colors used in the
various floating toolbars.

#### Parameters

| | |
| --- | --- |
| toolbarContainerColor | the container color for the floating toolbar. |
| toolbarContentColor | the content color for the floating toolbar. |
| fabContainerColor | the container color for an adjacent floating action button. |
| fabContentColor | the content color for an adjacent floating action button. |

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

<h2 id="vibrantfloatingactionbutton-onclick-modifier-shape-containercolor-contentcolor-interactionsource-content">VibrantFloatingActionButton</h2>

```kotlin
@Composable
    fun VibrantFloatingActionButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        shape: Shape = FloatingActionButtonDefaults.shape,
        containerColor: Color = vibrantFloatingToolbarColors().fabContainerColor,
        contentColor: Color = vibrantFloatingToolbarColors().fabContentColor,
        interactionSource: MutableInteractionSource? = null,
        content: @Composable () -> Unit,
    ) =
        FloatingActionButton(
            onClick = onClick,
            modifier = modifier.fillMaxSize(),
            shape = shape,
            containerColor = containerColor,
            contentColor = contentColor,
            elevation =
                FloatingActionButtonDefaults.elevation(
                    defaultElevation = ElevationTokens.Level2,
                    pressedElevation = ElevationTokens.Level2,
                    focusedElevation = ElevationTokens.Level2,
                    hoveredElevation = ElevationTokens.Level3,
                ),
            interactionSource = interactionSource,
            content = content,
        )
```

Creates a [FloatingActionButton](/jetpack-compose/androidx.compose.material3/material3/components/FloatingActionButton) that represents a toolbar floating action button with
vibrant colors.

The FAB's elevation and size will be controlled by the floating toolbar, so it's applied with
a [Modifier.fillMaxSize](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier).

#### Parameters

| | |
| --- | --- |
| onClick | called when this FAB is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this FAB |
| shape | defines the shape of this FAB's container and shadow |
| containerColor | the color used for the background of this FAB. Defaults to the [FloatingToolbarColors.fabContainerColor](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) from the [vibrantFloatingToolbarColors](#vibrantfloatingtoolbarcolors). |
| contentColor | the preferred color for content inside this FAB. Defaults to the [FloatingToolbarColors.fabContentColor](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) from the [vibrantFloatingToolbarColors](#vibrantfloatingtoolbarcolors). |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 an [Icon](/jetpack-compose/androidx.compose.material3/material3/components/Icon) |

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

<h2 id="standardfloatingactionbutton-onclick-modifier-shape-containercolor-contentcolor-interactionsource-content">StandardFloatingActionButton</h2>

```kotlin
@Composable
    fun StandardFloatingActionButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        shape: Shape = FloatingActionButtonDefaults.shape,
        containerColor: Color = standardFloatingToolbarColors().fabContainerColor,
        contentColor: Color = standardFloatingToolbarColors().fabContentColor,
        interactionSource: MutableInteractionSource? = null,
        content: @Composable () -> Unit,
    ) =
        FloatingActionButton(
            onClick = onClick,
            modifier = modifier.fillMaxSize(),
            shape = shape,
            containerColor = containerColor,
            contentColor = contentColor,
            elevation =
                FloatingActionButtonDefaults.elevation(
                    defaultElevation = ElevationTokens.Level2,
                    pressedElevation = ElevationTokens.Level2,
                    focusedElevation = ElevationTokens.Level2,
                    hoveredElevation = ElevationTokens.Level3,
                ),
            interactionSource = interactionSource,
            content = content,
        )
```

Creates a [FloatingActionButton](/jetpack-compose/androidx.compose.material3/material3/components/FloatingActionButton) that represents a toolbar floating action button with
standard colors.

The FAB's elevation and size will be controlled by the floating toolbar, so it's applied with
a [Modifier.fillMaxSize](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier).

#### Parameters

| | |
| --- | --- |
| onClick | called when this FAB is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this FAB |
| shape | defines the shape of this FAB's container and shadow |
| containerColor | the color used for the background of this FAB. Defaults to the [FloatingToolbarColors.fabContainerColor](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) from the [standardFloatingToolbarColors](#standardfloatingtoolbarcolors). |
| contentColor | the preferred color for content inside this FAB. Defaults to the [FloatingToolbarColors.fabContentColor](/jetpack-compose/androidx.compose.material3/material3/classes/FloatingToolbarColors) from the [standardFloatingToolbarColors](#standardfloatingtoolbarcolors). |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 an [Icon](/jetpack-compose/androidx.compose.material3/material3/components/Icon) |

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

<h2 id="floatingtoolbarverticalnestedscroll-expanded-onexpand-oncollapse-expandscrolldistancethreshold-collapsescrolldistancethreshold-reverselayout">floatingToolbarVerticalNestedScroll</h2>

```kotlin
fun Modifier.floatingToolbarVerticalNestedScroll(
        expanded: Boolean,
        onExpand: () -> Unit,
        onCollapse: () -> Unit,
        expandScrollDistanceThreshold: Dp = ScrollDistanceThreshold,
        collapseScrollDistanceThreshold: Dp = ScrollDistanceThreshold,
        reverseLayout: Boolean = false,
    ): Modifier
```

This [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) tracks vertical scroll events on the scrolling container that a floating
toolbar appears above. It then calls `onExpand` and `onCollapse` to adjust the toolbar's
state based on the scroll direction and distance.

Essentially, it expands the toolbar when you scroll down past a certain threshold and
collapses it when you scroll back up. You can customize the expand and collapse thresholds
through the `expandScrollDistanceThreshold` and `collapseScrollDistanceThreshold`.

#### Parameters

| | |
| --- | --- |
| expanded | the current expanded state of the floating toolbar |
| onExpand | callback to be invoked when the toolbar should expand |
| onCollapse | callback to be invoked when the toolbar should collapse |
| expandScrollDistanceThreshold | the scroll distance (in dp) required to trigger an `onExpand` |
| collapseScrollDistanceThreshold | the scroll distance (in dp) required to trigger an `onCollapse` |
| reverseLayout | indicates that the scrollable content has a reversed scrolling direction |