OutlinedIconButton

Functions summary

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

Wear Material OutlinedIconButton is a circular, icon-only button with a transparent background, contrasting icon color and border.

Functions

OutlinedIconButton

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

Wear Material OutlinedIconButton is a circular, icon-only button with a transparent background, contrasting icon color and border. It offers a single slot to take an icon or image.

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

The recommended icon button sizes are IconButtonDefaults.DefaultButtonSize, IconButtonDefaults.LargeButtonSize, IconButtonDefaults.SmallButtonSize and IconButtonDefaults.ExtraSmallButtonSize.

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.

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

An OutlinedIconButton has a transparent background and a thin border by default with content taking the theme primary color.

Example of OutlinedIconButton:

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
import androidx.wear.compose.material3.OutlinedIconButton

OutlinedIconButton(onClick = { /* Do something */ }) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}
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.outlinedIconButtonColors()

IconButtonColors that will be used to resolve the background and icon color for this button in different states. See IconButtonDefaults.outlinedIconButtonColors.
border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled)

Optional BorderStroke for the icon button border - ButtonDefaults.outlinedButtonBorder by default.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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.