IconButtonDefaults

Artifact: androidx.wear.compose:compose-material3

Added in 1.5.0

object IconButtonDefaults

Contains the default values used by IconButton.

Summary

Public functions
`IconButtonShapes`	`@Composable animatedShapes()` Returns the default `IconButtonShapes` with a animation between two CornerBasedShapes when pressed.
`IconButtonShapes`	`@Composable animatedShapes(shape: CornerBasedShape?, pressedShape: CornerBasedShape?)` Returns a `IconButtonShapes` with an animation between two CornerBasedShapes when pressed.
`IconButtonColors`	`@Composable filledIconButtonColors()` Returns an `IconButtonColors` with the colors for `FilledIconButton` - by default, a colored background with a contrasting icon color.
`IconButtonColors`	`@Composable filledIconButtonColors( containerColor: Color, contentColor: Color, disabledContainerColor: Color, disabledContentColor: Color )` Returns an `IconButtonColors` with the colors for `FilledIconButton` - by default, a colored background with a contrasting icon color.
`IconButtonColors`	`@Composable filledTonalIconButtonColors()` Returns an `IconButtonColors` with the colors for `FilledTonalIconButton`- by default, a muted colored background with a contrasting icon color.
`IconButtonColors`	`@Composable filledTonalIconButtonColors( containerColor: Color, contentColor: Color, disabledContainerColor: Color, disabledContentColor: Color )` Returns an `IconButtonColors` with the colors for `FilledTonalIconButton`- by default, a muted colored background with a contrasting icon color.
`IconButtonColors`	`@Composable filledVariantIconButtonColors()` Returns an `IconButtonColors` as an alternative to the `filledTonalIconButtonColors`, giving a surface with more chroma to indicate selected or highlighted states that are not primary calls-to-action.
`IconButtonColors`	`@Composable filledVariantIconButtonColors( containerColor: Color, contentColor: Color, disabledContainerColor: Color, disabledContentColor: Color )` Returns an `IconButtonColors` as an alternative to the `filledTonalIconButtonColors`, giving a surface with more chroma to indicate selected or highlighted states that are not primary calls-to-action.
`IconButtonColors`	`@Composable iconButtonColors()` Returns an `IconButtonColors` with the colors for `IconButton` - by default, a transparent background with a contrasting icon color.
`IconButtonColors`	`@Composable iconButtonColors( containerColor: Color, contentColor: Color, disabledContainerColor: Color, disabledContentColor: Color )` Returns an `IconButtonColors` with the colors for `IconButton` - by default, a transparent background with a contrasting icon color.
`Dp`	`iconSizeFor(buttonSize: Dp)` Recommended icon size for a given icon button size.
`IconButtonColors`	`@Composable outlinedIconButtonColors()` Returns an `IconButtonColors` with the colors for `OutlinedIconButton`- by default, a transparent background with contrasting icon color.
`IconButtonColors`	`@Composable outlinedIconButtonColors( contentColor: Color, disabledContentColor: Color )` Returns an `IconButtonColors` with the colors for `OutlinedIconButton`- by default, a transparent background with contrasting icon color.
`IconButtonShapes`	`@Composable shapes()` Returns the default `IconButtonShapes` for a static `IconButton`.
`IconButtonShapes`	`@Composable shapes(shape: Shape)` Returns a `IconButtonShapes` for a static `IconButton`.

Public properties
`Dp`	`DefaultButtonSize` The default size applied for buttons.
`Dp`	`DefaultIconSize` The default size of an icon when used inside an icon button of size DefaultButtonSize.
`Float`	`DisabledImageOpacity` Recommended alpha to apply to an IconButton with Image content with disabled
`Dp`	`ExtraSmallButtonSize` The recommended background size of an extra small, compact button.
`Dp`	`LargeButtonSize` The recommended size for a large button.
`Dp`	`LargeIconSize` The size of an icon when used inside an icon button with size `LargeButtonSize`.
`Dp`	`SmallButtonSize` The recommended size for a small button.
`Dp`	`SmallIconSize` The recommended size of an icon when used inside an icon button with size `SmallButtonSize` or `ExtraSmallButtonSize`.
`Dp`	`minimumVerticalListContentPadding` The minimum vertical content padding for the list when an `IconButton` is placed at the top or bottom edge.
`CornerBasedShape`	`pressedShape` Recommended pressed `Shape` for `IconButton`.
`RoundedCornerShape`	`shape` Recommended `Shape` for `IconButton`.

Public functions

animatedShapes

Added in 1.5.0

@Composable
fun animatedShapes(): IconButtonShapes

Returns the default IconButtonShapes with a animation between two CornerBasedShapes when pressed.

Example of a simple icon button using the default colors, animated when pressed:

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 a simple icon toggle button using the default colors, animated when pressed:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.IconToggleButton
import androidx.wear.compose.material3.IconToggleButtonDefaults
import androidx.wear.compose.material3.samples.icons.WifiOffIcon
import androidx.wear.compose.material3.samples.icons.WifiOnIcon

var firstChecked by remember { mutableStateOf(true) }
var secondChecked by remember { mutableStateOf(false) }

Row(
    modifier = Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
) {
    IconToggleButton(
        checked = firstChecked,
        onCheckedChange = { firstChecked = !firstChecked },
        shapes = IconToggleButtonDefaults.animatedShapes(),
    ) {
        if (firstChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }

    Spacer(modifier = Modifier.width(5.dp))

    IconToggleButton(
        checked = secondChecked,
        onCheckedChange = { secondChecked = !secondChecked },
        shapes = IconToggleButtonDefaults.animatedShapes(),
    ) {
        if (secondChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }
}

animatedShapes

Added in 1.5.0

@Composable
fun animatedShapes(
    shape: CornerBasedShape? = null,
    pressedShape: CornerBasedShape? = null
): IconButtonShapes

Returns a IconButtonShapes with an animation between two CornerBasedShapes when pressed.

Example of a simple icon button using the default colors, animated when pressed:

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")
}

Parameters
`shape: CornerBasedShape? = null`	The normal shape of the IconButton - if null, the default `IconButtonDefaults.shape` is used.
`pressedShape: CornerBasedShape? = null`	The pressed shape of the IconButton - if null, the default `IconButtonDefaults.pressedShape` is used.

filledIconButtonColors

Added in 1.5.0

@Composable
fun filledIconButtonColors(): IconButtonColors

Returns an IconButtonColors with the colors for FilledIconButton - by default, a colored background with a contrasting icon color. If the icon button is disabled then the colors will default to the MaterialTheme onSurface color with suitable alpha values applied.

filledIconButtonColors

Added in 1.6.0

@Composable
fun filledIconButtonColors(
    containerColor: Color = Color.Unspecified,
    contentColor: Color = Color.Unspecified,
    disabledContainerColor: Color = Color.Unspecified,
    disabledContentColor: Color = Color.Unspecified
): IconButtonColors

Parameters
`containerColor: Color = Color.Unspecified`	The background color of this icon button when enabled.
`contentColor: Color = Color.Unspecified`	The color of this icon when enabled.
`disabledContainerColor: Color = Color.Unspecified`	The background color of this icon button when not enabled.
`disabledContentColor: Color = Color.Unspecified`	The color of this icon when not enabled.

filledTonalIconButtonColors

Added in 1.5.0

@Composable
fun filledTonalIconButtonColors(): IconButtonColors

Returns an IconButtonColors with the colors for FilledTonalIconButton- by default, a muted colored background with a contrasting icon color. If the icon button is disabled then the colors will default to the MaterialTheme onSurface color with suitable alpha values applied.

filledTonalIconButtonColors

Added in 1.6.0

@Composable
fun filledTonalIconButtonColors(
    containerColor: Color = Color.Unspecified,
    contentColor: Color = Color.Unspecified,
    disabledContainerColor: Color = Color.Unspecified,
    disabledContentColor: Color = Color.Unspecified
): IconButtonColors

Parameters
`containerColor: Color = Color.Unspecified`	The background color of this icon button when enabled.
`contentColor: Color = Color.Unspecified`	The color of this icon when enabled.
`disabledContainerColor: Color = Color.Unspecified`	The background color of this icon button when not enabled.
`disabledContentColor: Color = Color.Unspecified`	The color of this icon when not enabled.

filledVariantIconButtonColors

Added in 1.5.0

@Composable
fun filledVariantIconButtonColors(): IconButtonColors

Returns an IconButtonColors as an alternative to the filledTonalIconButtonColors, giving a surface with more chroma to indicate selected or highlighted states that are not primary calls-to-action. If the icon button is disabled then the colors will default to the MaterialTheme onSurface color with suitable alpha values applied.

Example of creating a FilledIconButton with filledVariantIconButtonColors:

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

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

FilledVariantIconButtonSample Composite
Image

filledVariantIconButtonColors

Added in 1.6.0

@Composable
fun filledVariantIconButtonColors(
    containerColor: Color = Color.Unspecified,
    contentColor: Color = Color.Unspecified,
    disabledContainerColor: Color = Color.Unspecified,
    disabledContentColor: Color = Color.Unspecified
): IconButtonColors

Example of creating a FilledIconButton with filledVariantIconButtonColors:

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

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

FilledVariantIconButtonSample Composite
Image

Parameters
`containerColor: Color = Color.Unspecified`	The background color of this icon button when enabled.
`contentColor: Color = Color.Unspecified`	The color of this icon when enabled.
`disabledContainerColor: Color = Color.Unspecified`	The background color of this icon button when not enabled.
`disabledContentColor: Color = Color.Unspecified`	The color of this icon when not enabled.

iconButtonColors

Added in 1.5.0

@Composable
fun iconButtonColors(): IconButtonColors

Returns an IconButtonColors with the colors for IconButton - by default, a transparent background with a contrasting icon color. If the icon button is disabled then the colors will default to the MaterialTheme onSurface color with suitable alpha values applied.

iconButtonColors

Added in 1.6.0

@Composable
fun iconButtonColors(
    containerColor: Color = Color.Transparent,
    contentColor: Color = Color.Unspecified,
    disabledContainerColor: Color = Color.Transparent,
    disabledContentColor: Color = Color.Unspecified
): IconButtonColors

Parameters
`containerColor: Color = Color.Transparent`	The background color of this icon button when enabled.
`contentColor: Color = Color.Unspecified`	The color of this icon when enabled.
`disabledContainerColor: Color = Color.Transparent`	The background color of this icon button when not enabled.
`disabledContentColor: Color = Color.Unspecified`	The color of this icon when not enabled.

iconSizeFor

Added in 1.6.0

fun iconSizeFor(buttonSize: Dp): Dp

Recommended icon size for a given icon button size.

Ensures that the minimum recommended icon size is applied.

Examples: for size LargeButtonSize, returns LargeIconSize, for size ExtraSmallButtonSize returns SmallIconSize.

Parameters
`buttonSize: Dp`	The size of the icon button

outlinedIconButtonColors

Added in 1.5.0

@Composable
fun outlinedIconButtonColors(): IconButtonColors

Returns an IconButtonColors with the colors for OutlinedIconButton- by default, a transparent background with contrasting icon color. If the icon button is disabled then the colors will default to the MaterialTheme onSurface color with suitable alpha values applied.

outlinedIconButtonColors

Added in 1.6.0

@Composable
fun outlinedIconButtonColors(
    contentColor: Color = Color.Unspecified,
    disabledContentColor: Color = Color.Unspecified
): IconButtonColors

Parameters
`contentColor: Color = Color.Unspecified`	The color of this icon button when enabled.
`disabledContentColor: Color = Color.Unspecified`	The color of this icon when not enabled.

shapes

Added in 1.5.0

@Composable
fun shapes(): IconButtonShapes

Returns the default IconButtonShapes for a static IconButton.

shapes

Added in 1.5.0

@Composable
fun shapes(shape: Shape): IconButtonShapes

Returns a IconButtonShapes for a static IconButton.

Parameters
`shape: Shape`	The normal shape of the IconButton.

Public properties

DefaultButtonSize

val DefaultButtonSize: Dp

The default size applied for buttons. It is recommended to apply this size using Modifier.touchTargetAwareSize.

DefaultIconSize

val DefaultIconSize: Dp

The default size of an icon when used inside an icon button of size DefaultButtonSize. Use iconSizeFor to easily determine the icon size.

DisabledImageOpacity

Added in 1.5.0

val DisabledImageOpacity: Float

Recommended alpha to apply to an IconButton with Image content with disabled

ExtraSmallButtonSize

val ExtraSmallButtonSize: Dp

The recommended background size of an extra small, compact button. It is recommended to apply this size using Modifier.touchTargetAwareSize.

LargeButtonSize

val LargeButtonSize: Dp

The recommended size for a large button. It is recommended to apply this size using Modifier.touchTargetAwareSize.

LargeIconSize

val LargeIconSize: Dp

The size of an icon when used inside an icon button with size LargeButtonSize. Use iconSizeFor to easily determine the icon size.

SmallButtonSize

val SmallButtonSize: Dp

The recommended size for a small button. It is recommended to apply this size using Modifier.touchTargetAwareSize.

SmallIconSize

val SmallIconSize: Dp

The recommended size of an icon when used inside an icon button with size SmallButtonSize or ExtraSmallButtonSize. Use iconSizeFor to easily determine the icon size.

minimumVerticalListContentPadding

val minimumVerticalListContentPadding: Dp

The minimum vertical content padding for the list when an IconButton is placed at the top or bottom edge. Recommended for use with androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope's androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope.minimumVerticalContentPadding, which allows items to choose a preferred content padding for the list. TransformingLazyColumn takes its contentPadding as the maximum of the preferred content padding values and its own contentPadding parameter.

pressedShape

Added in 1.5.0

val pressedShape: CornerBasedShape

Recommended pressed Shape for IconButton.

shape

Added in 1.5.0

val shape: RoundedCornerShape

Recommended Shape for IconButton.