# FloatingActionButton

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, elevation: https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButtonElevation, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design floating action button](https://material.io/components/buttons-floating-action-button) | Cmn |

## Functions

### FloatingActionButton

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/FloatingActionButton.kt+function:FloatingActionButton) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.10.0)

```
@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    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(),
    content: @Composable () -> Unit
): Unit
```

[Material Design floating action button](https://material.io/components/buttons-floating-action-button)

A floating action button (FAB) represents the primary action of a screen.

![Floating action button
image](https://developer.android.com/images/reference/androidx/compose/material/floating-action-button.png)

This FAB is typically used with an `https://developer.android.com/reference/kotlin/androidx/compose/material/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)`:

```kotlin
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite

FloatingActionButton(onClick = { /*do something*/ }) {
    Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
}
```

See `https://developer.android.com/reference/kotlin/androidx/compose/material/ExtendedFloatingActionButton.composable#ExtendedFloatingActionButton(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation)` for an extended FAB that contains text and an optional icon.

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback invoked when this FAB is clicked |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this FAB. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/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. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50))` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` of this FAB |
| `backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.secondary` | The background color. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Transparent()` to have no color |
| `contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = contentColorFor(backgroundColor)` | The preferred content color for content inside this FAB |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation()` | `https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButtonElevation` used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content of this FAB - this is typically an `https://developer.android.com/reference/kotlin/androidx/compose/material/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)`. |