{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

IconButtonKt

public final class IconButtonKt


Summary

Public methods

static final void
@Composable
FilledIconButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design filled icon button.

static final void
@Composable
FilledIconToggleButton(
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconToggleButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design filled icon toggle button.

static final void
@Composable
FilledTonalIconButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design filled tonal icon button.

static final void
@Composable
FilledTonalIconToggleButton(
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconToggleButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design filled tonal icon toggle button.

static final void
@Composable
IconButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull IconButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design standard icon button.

static final void
@Composable
IconToggleButton(
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull IconToggleButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design standard icon toggle button.

static final void
@Composable
OutlinedIconButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconButtonColors colors,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design outlined icon button.

static final void
@Composable
OutlinedIconToggleButton(
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconToggleButtonColors colors,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design outlined icon toggle button.

Public methods

FilledIconButton

@Composable
public static final void FilledIconButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design filled icon button.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Filled icon button image

content should typically be an Icon (see androidx.compose.material.icons.Icons). If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp. This icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines.

Filled icon button sample:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

FilledIconButton(onClick = { /* doSomething() */ }) {
    Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
}
Parameters
@NonNull Function0<Unit> onClick

called when this icon button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this icon button

boolean enabled

controls the enabled state of this icon button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Shape shape

defines the shape of this icon button's container

@NonNull IconButtonColors colors

IconButtonColors that will be used to resolve the colors used for this icon button in different states. See IconButtonDefaults.filledIconButtonColors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this icon button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this icon button in different states.

@Composable @NonNull Function0<Unit> content

the content of this icon button, typically an Icon

FilledIconToggleButton

@Composable
public static final void FilledIconToggleButton(
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconToggleButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design filled icon toggle button.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Filled icon toggle button image

content should typically be an Icon (see androidx.compose.material.icons.Icons). If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp. This icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines.

Toggleable filled icon button sample:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.FilledIconToggleButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var checked by remember { mutableStateOf(false) }
FilledIconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    if (checked) {
        Icon(Icons.Filled.Lock, contentDescription = "Localized description")
    } else {
        Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
    }
}
Parameters
boolean checked

whether this icon button is toggled on or off

@NonNull Function1<@NonNull BooleanUnit> onCheckedChange

called when this icon button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this icon button

boolean enabled

controls the enabled state of this icon button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Shape shape

defines the shape of this icon button's container

@NonNull IconToggleButtonColors colors

IconToggleButtonColors that will be used to resolve the colors used for this icon button in different states. See IconButtonDefaults.filledIconToggleButtonColors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this icon button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this icon button in different states.

@Composable @NonNull Function0<Unit> content

the content of this icon button, typically an Icon

FilledTonalIconButton

@Composable
public static final void FilledTonalIconButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design filled tonal icon button.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Filled tonal icon button image

A filled tonal icon button is a medium-emphasis icon button that is an alternative middle ground between the default FilledIconButton and OutlinedIconButton. They can be used in contexts where the lower-priority icon button requires slightly more emphasis than an outline would give.

content should typically be an Icon (see androidx.compose.material.icons.Icons). If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp. This icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines.

Filled tonal icon button sample:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.FilledTonalIconButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

FilledTonalIconButton(onClick = { /* doSomething() */ }) {
    Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
}
Parameters
@NonNull Function0<Unit> onClick

called when this icon button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this icon button

boolean enabled

controls the enabled state of this icon button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Shape shape

defines the shape of this icon button's container

@NonNull IconButtonColors colors

IconButtonColors that will be used to resolve the colors used for this icon button in different states. See IconButtonDefaults.filledIconButtonColors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this icon button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this icon button in different states.

@Composable @NonNull Function0<Unit> content

the content of this icon button, typically an Icon

FilledTonalIconToggleButton

@Composable
public static final void FilledTonalIconToggleButton(
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconToggleButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design filled tonal icon toggle button.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Filled tonal icon toggle button image

A filled tonal toggle icon button is a medium-emphasis icon button that is an alternative middle ground between the default FilledIconToggleButton and OutlinedIconToggleButton. They can be used in contexts where the lower-priority icon button requires slightly more emphasis than an outline would give.

content should typically be an Icon (see androidx.compose.material.icons.Icons). If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp. This icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines.

Toggleable filled tonal icon button sample:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.FilledTonalIconToggleButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var checked by remember { mutableStateOf(false) }
FilledTonalIconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    if (checked) {
        Icon(Icons.Filled.Lock, contentDescription = "Localized description")
    } else {
        Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
    }
}
Parameters
boolean checked

whether this icon button is toggled on or off

@NonNull Function1<@NonNull BooleanUnit> onCheckedChange

called when this icon button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this icon button

boolean enabled

controls the enabled state of this icon button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Shape shape

defines the shape of this icon button's container

@NonNull IconToggleButtonColors colors

IconToggleButtonColors that will be used to resolve the colors used for this icon button in different states. See IconButtonDefaults.filledIconToggleButtonColors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this icon button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this icon button in different states.

@Composable @NonNull Function0<Unit> content

the content of this icon button, typically an Icon

IconButton

@Composable
public static final void IconButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull IconButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design standard icon button.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Standard icon button image

content should typically be an Icon (see androidx.compose.material.icons.Icons). If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp. This icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

IconButton(onClick = { /* doSomething() */ }) {
    Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
}
Parameters
@NonNull Function0<Unit> onClick

called when this icon button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this icon button

boolean enabled

controls the enabled state of this icon button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull IconButtonColors colors

IconButtonColors that will be used to resolve the colors used for this icon button in different states. See IconButtonDefaults.iconButtonColors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this icon button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this icon button in different states.

@Composable @NonNull Function0<Unit> content

the content of this icon button, typically an Icon

IconToggleButton

@Composable
public static final void IconToggleButton(
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull IconToggleButtonColors colors,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design standard icon toggle button.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Standard icon toggle button image

content should typically be an Icon (see androidx.compose.material.icons.Icons). If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp. This icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.Icon
import androidx.compose.material3.IconToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var checked by remember { mutableStateOf(false) }
IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    if (checked) {
        Icon(Icons.Filled.Lock, contentDescription = "Localized description")
    } else {
        Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
    }
}
Parameters
boolean checked

whether this icon button is toggled on or off

@NonNull Function1<@NonNull BooleanUnit> onCheckedChange

called when this icon button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this icon button

boolean enabled

controls the enabled state of this icon button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull IconToggleButtonColors colors

IconToggleButtonColors that will be used to resolve the colors used for this icon button in different states. See IconButtonDefaults.iconToggleButtonColors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this icon button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this icon button in different states.

@Composable @NonNull Function0<Unit> content

the content of this icon button, typically an Icon

OutlinedIconButton

@Composable
public static final void OutlinedIconButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconButtonColors colors,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design outlined icon button.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Outlined icon button image

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Use this "contained" icon button when the component requires more visual separation from the background.

content should typically be an Icon (see androidx.compose.material.icons.Icons). If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp. The outlined icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.OutlinedIconButton

OutlinedIconButton(onClick = { /* doSomething() */ }) {
    Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
}
Parameters
@NonNull Function0<Unit> onClick

called when this icon button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this icon button

boolean enabled

controls the enabled state of this icon button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Shape shape

defines the shape of this icon button's container and border (when border is not null)

@NonNull IconButtonColors colors

IconButtonColors that will be used to resolve the colors used for this icon button in different states. See IconButtonDefaults.outlinedIconButtonColors.

BorderStroke border

the border to draw around the container of this icon button. Pass null for no border. See IconButtonDefaults.outlinedIconButtonBorder.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this icon button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this icon button in different states.

@Composable @NonNull Function0<Unit> content

the content of this icon button, typically an Icon

OutlinedIconToggleButton

@Composable
public static final void OutlinedIconToggleButton(
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull IconToggleButtonColors colors,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

Material Design outlined icon toggle button.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Outlined icon toggle button image

content should typically be an Icon (see androidx.compose.material.icons.Icons). If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp. This icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.Icon
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedIconToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var checked by remember { mutableStateOf(false) }
OutlinedIconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    if (checked) {
        Icon(Icons.Filled.Lock, contentDescription = "Localized description")
    } else {
        Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
    }
}
Parameters
boolean checked

whether this icon button is toggled on or off

@NonNull Function1<@NonNull BooleanUnit> onCheckedChange

called when this icon button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this icon button

boolean enabled

controls the enabled state of this icon button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Shape shape

defines the shape of this icon button's container and border (when border is not null)

@NonNull IconToggleButtonColors colors

IconToggleButtonColors that will be used to resolve the colors used for this icon button in different states. See IconButtonDefaults.outlinedIconToggleButtonColors.

BorderStroke border

the border to draw around the container of this icon button. Pass null for no border. See IconButtonDefaults.outlinedIconToggleButtonBorder.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this icon button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this icon button in different states.

@Composable @NonNull Function0<Unit> content

the content of this icon button, typically an Icon