IconButtonDefaults

Artifact: androidx.wear.compose:compose-material3

object IconButtonDefaults

Contains the default values used by IconButton.

Summary

Public functions
`IconButtonShapes`	`@Composable animatedShapes()` Creates a `Shape` with a animation between two CornerBasedShapes.
`IconButtonShapes`	`@Composable animatedShapes(shape: CornerBasedShape, pressedShape: CornerBasedShape)` Creates a `Shape` with a animation between two CornerBasedShapes.
`IconButtonColors`	`@Composable filledIconButtonColors()` Creates a `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 )` Creates a `IconButtonColors` with the colors for `FilledIconButton` - by default, a colored background with a contrasting icon color.
`IconButtonColors`	`@Composable filledTonalIconButtonColors()` Creates a `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 )` Creates a `IconButtonColors` with the colors for `FilledTonalIconButton`- by default, a muted colored background with a contrasting icon color.
`IconButtonColors`	`@Composable filledVariantIconButtonColors()` Creates a `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 )` Creates a `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()` Creates a `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 )` Creates a `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()` Creates a `IconButtonColors` with the colors for `OutlinedIconButton`- by default, a transparent background with contrasting icon color.
`IconButtonColors`	`@Composable outlinedIconButtonColors( contentColor: Color, disabledContentColor: Color )` Creates a `IconButtonColors` with the colors for `OutlinedIconButton`- by default, a transparent background with contrasting icon color.
`IconButtonShapes`	`@Composable shapes()` Creates an `IconButtonShapes` with a static `shape`.
`IconButtonShapes`	`@Composable shapes(shape: Shape?)` Creates an `IconButtonShapes` with a static `shape`.

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`.
`CornerBasedShape`	`pressedShape` Recommended pressed `Shape` for `IconButton`.
`RoundedCornerShape`	`shape` Recommended `Shape` for `IconButton`.

Public functions

animatedShapes

Added in 1.0.0-alpha32

@Composable
fun animatedShapes(): IconButtonShapes

Creates a Shape with a animation between two CornerBasedShapes.

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

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.0.0-alpha32

@Composable
fun animatedShapes(
    shape: CornerBasedShape = IconButtonDefaults.shape,
    pressedShape: CornerBasedShape = IconButtonDefaults.pressedShape
): IconButtonShapes

Creates a Shape with a animation between two CornerBasedShapes.

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

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

Parameters
`shape: CornerBasedShape = IconButtonDefaults.shape`	The normal shape of the IconButton.
`pressedShape: CornerBasedShape = IconButtonDefaults.pressedShape`	The pressed shape of the IconButton.

filledIconButtonColors

Added in 1.0.0-alpha32

@Composable
fun filledIconButtonColors(): IconButtonColors

Creates a 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

@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.0.0-alpha32

@Composable
fun filledTonalIconButtonColors(): IconButtonColors

Creates a 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

@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.0.0-alpha32

@Composable
fun filledVariantIconButtonColors(): IconButtonColors

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

filledVariantIconButtonColors

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

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.0.0-alpha32

@Composable
fun iconButtonColors(): IconButtonColors

Creates a 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

@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

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.0.0-alpha32

@Composable
fun outlinedIconButtonColors(): IconButtonColors

Creates a 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

@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.0.0-alpha32

@Composable
fun shapes(): IconButtonShapes

Creates an IconButtonShapes with a static shape.

shapes

Added in 1.0.0-alpha32

@Composable
fun shapes(shape: Shape? = null): IconButtonShapes

Creates an IconButtonShapes with a static shape.

Parameters
`shape: Shape? = null`	The normal shape of the IconButton.

Public properties

DefaultButtonSize

Added in 1.0.0-alpha32

val DefaultButtonSize: Dp

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

DefaultIconSize

Added in 1.0.0-alpha32

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.0.0-alpha32

val DisabledImageOpacity: Float

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

ExtraSmallButtonSize

Added in 1.0.0-alpha32

val ExtraSmallButtonSize: Dp

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

LargeButtonSize

Added in 1.0.0-alpha32

val LargeButtonSize: Dp

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

LargeIconSize

Added in 1.0.0-alpha32

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

Added in 1.0.0-alpha32

val SmallButtonSize: Dp

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

SmallIconSize

Added in 1.0.0-alpha32

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.

pressedShape

Added in 1.0.0-alpha32

val pressedShape: CornerBasedShape

Recommended pressed Shape for IconButton.

shape

Added in 1.0.0-alpha32

val shape: RoundedCornerShape

Recommended Shape for IconButton.