IconButton

Functions summary

Unit

@Composable
IconButton(
    onClick: () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    onLongClickLabel: String?,
    enabled: Boolean,
    shapes: IconButtonShapes,
    colors: IconButtonColors,
    border: BorderStroke?,
    interactionSource: MutableInteractionSource?,
    content: @Composable BoxScope.() -> Unit
)

Wear Material IconButton is a circular, icon-only button with transparent background and no border.

Functions

IconButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

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

Wear Material IconButton is a circular, icon-only button with transparent background and no border. It offers a single slot to take icon or image content.

Set the size of the IconButton with Modifier.touchTargetAwareSize to ensure that the recommended minimum touch target size is available.

Use IconButtonDefaults.iconSizeFor to determine the icon size for a given IconButtonDefaults size, or refer to icon sizes IconButtonDefaults.SmallIconSize, IconButtonDefaults.DefaultIconSize, IconButtonDefaults.LargeButtonSize directly.

IconButton can be enabled or disabled. A disabled button will not respond to click events.

Example of an IconButton:

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

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

Example of an IconButton with onLongClick:

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

IconButton(
    onClick = { /* Do something for onClick*/ },
    onLongClick = onLongClick,
    onLongClickLabel = "Long click",
) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}

Example of an IconButton with shape animation of rounded corners on press:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.wear.compose.material3.FilledIconButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton
import androidx.wear.compose.material3.IconButtonDefaults

FilledIconButton(
    onClick = { /* Do something */ },
    shapes = IconButtonDefaults.animatedShapes(),
    colors = colors,
) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}

Example of an IconButton with image content:

import androidx.compose.foundation.Image
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.layout.ContentScale
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton
import androidx.wear.compose.material3.IconButtonDefaults

IconButton(onClick = { /* Do something */ }, shapes = shapes, enabled = enabled) {
    Image(
        painter = painter,
        contentDescription = null,
        contentScale = ContentScale.Crop,
        modifier =
            if (enabled) Modifier else Modifier.alpha(IconButtonDefaults.DisabledImageOpacity),
    )
}

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button.
`modifier: Modifier = Modifier`	Modifier to be applied to the button.
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shapes: IconButtonShapes = IconButtonDefaults.shapes()`	Defines the shape for this button. Defaults to a static shape based on `IconButtonDefaults.shape`, but animated versions are available through `IconButtonDefaults.animatedShapes`.
`colors: IconButtonColors = IconButtonDefaults.iconButtonColors()`	`IconButtonColors` that will be used to resolve the background and icon color for this button in different states.
`border: BorderStroke? = null`	Optional `BorderStroke` for the icon button border.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `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: @Composable BoxScope.() -> Unit`	The content displayed on the icon button, expected to be icon or image.