IconButtonDefaults

object IconButtonDefaults


Contains the default values used by IconButton.

Summary

Public functions

IconButtonShapes

Creates a Shape with a animation between two CornerBasedShapes.

IconButtonColors

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

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

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

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

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

Creates a IconButtonShapes with a static shape.

Public properties

Dp

The default size applied for buttons.

Dp

The default size of an icon when used inside an icon button of size DefaultButtonSize.

Dp

The recommended background size of an extra small, compact button.

Dp

The recommended size for a large button.

Dp

The size of an icon when used inside an icon button with size LargeButtonSize.

Dp

The recommended size for a small button.

Dp

The recommended size of an icon when used inside an icon button with size SmallButtonSize or ExtraSmallButtonSize.

Float

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

CornerBasedShape

Recommended pressed Shape for IconButton.

RoundedCornerShape

Recommended Shape for IconButton.

Public functions

animatedShapes

Added in 1.0.0-alpha30
@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.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
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.Icon
import androidx.wear.compose.material3.IconToggleButton
import androidx.wear.compose.material3.IconToggleButtonDefaults

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(),
    ) {
        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
    }

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

    IconToggleButton(
        checked = secondChecked,
        onCheckedChange = { secondChecked = !secondChecked },
        shapes = IconToggleButtonDefaults.animatedShapes(),
    ) {
        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
    }
}
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-alpha30
@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

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.

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-alpha30
@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

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.

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-alpha30
@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

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

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.

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-alpha30
@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

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.

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-alpha30
@Composable
fun shapes(shape: Shape = IconButtonDefaults.shape): IconButtonShapes

Creates a IconButtonShapes with a static shape.

Parameters
shape: Shape = IconButtonDefaults.shape

The normal shape of the IconButton.

Public properties

DefaultButtonSize

Added in 1.0.0-alpha30
val DefaultButtonSizeDp

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

DefaultIconSize

Added in 1.0.0-alpha30
val DefaultIconSizeDp

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

ExtraSmallButtonSize

Added in 1.0.0-alpha30
val ExtraSmallButtonSizeDp

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-alpha30
val LargeButtonSizeDp

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

LargeIconSize

Added in 1.0.0-alpha30
val LargeIconSizeDp

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-alpha30
val SmallButtonSizeDp

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

SmallIconSize

Added in 1.0.0-alpha30
val SmallIconSizeDp

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.

disabledImageOpacity

Added in 1.0.0-alpha30
val disabledImageOpacityFloat

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

pressedShape

Added in 1.0.0-alpha30
val pressedShapeCornerBasedShape

Recommended pressed Shape for IconButton.

shape

Added in 1.0.0-alpha30
val shapeRoundedCornerShape

Recommended Shape for IconButton.