# FilledTonalIconButton

## 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/wear/compose/material3/FilledTonalIconButton.composable#FilledTonalIconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, shapes: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonShapes, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonColors, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/FilledTonalIconButton.composable#FilledTonalIconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` is a circular, icon-only button with a muted, colored background and a contrasting icon color. |

## Functions

### FilledTonalIconButton

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/IconButton.kt+function:FilledTonalIconButton) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@Composable
fun FilledTonalIconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shapes: IconButtonShapes = IconButtonDefaults.shapes(),
    colors: IconButtonColors = IconButtonDefaults.filledTonalIconButtonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit
```

Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/FilledTonalIconButton.composable#FilledTonalIconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` is a circular, icon-only button with a muted, colored background and a contrasting icon color. It offers a single slot to take an icon or image.

Set the size of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/FilledTonalIconButton.composable#FilledTonalIconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` with Modifier.`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/touchTargetAwareSize.modifier#(androidx.compose.ui.Modifier).touchTargetAwareSize(androidx.compose.ui.unit.Dp)` to ensure that the recommended minimum touch target size is available.

The recommended icon button sizes are `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#DefaultButtonSize()`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#LargeButtonSize()`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#SmallButtonSize()` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#ExtraSmallButtonSize()`.

Use `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#iconSizeFor(androidx.compose.ui.unit.Dp)` to determine the icon size for a given `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults` size, or refer to icon sizes `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#SmallIconSize()`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#DefaultIconSize()`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#LargeButtonSize()` directly.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/FilledTonalIconButton.composable#FilledTonalIconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` can be enabled or disabled. A disabled button will not respond to click events.

Example of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/FilledTonalIconButton.composable#FilledTonalIconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`:

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.wear.compose.material3.FilledTonalIconButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton

FilledTonalIconButton(onClick = { /* Do something */ }) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}
```

![FilledTonalIconButtonSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_FilledTonalIconButtonSample_CompositeImage.png)

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Will be called when the user clicks the button. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the button. |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | Called when this button is long clicked (long-pressed). When this callback is set, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#FilledTonalIconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` should be set as well. |
| `onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | Semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#FilledTonalIconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.wear.compose.material3.IconButtonShapes,androidx.wear.compose.material3.IconButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` action. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state of the button. When `false`, this button will not be clickable. |
| `shapes: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonShapes = IconButtonDefaults.shapes()` | Defines the shape for this button. Defaults to a static shape based on `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#shape()`, but animated versions are available through `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonDefaults#animatedShapes()`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonColors = IconButtonDefaults.filledTonalIconButtonColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/IconButtonColors` that will be used to resolve the background and icon color for this button in different states. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke` for the icon button border. |
| `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 button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content displayed on the icon button, expected to be icon or image. |