IconButton

Material	Material3

El componente IconButton permite que un ícono actúe como un Button, ejecuta una acción cuando el usuario hace click en este componente. Es usado cuando se requiere un botón compacto, como en TopAppBar.

Implementación

Definición del componente

Material

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
)

Atributo	Descripción
onClick	Función lambda que es llamada cuando el botón es presionado.
modifier	Modificador que implementará el composable (Opcional).
enabled	Controla el estado del componente. Sí el valor es falso, entonces el componente no responderá a la acción de click, también se mostrará como deshabilitado visualmente.
interactionSource	Representa una serie de interacciones para este componente. Se puede crear un objeto personalizado a través de remember { MutableInteractionSource() }.
content	Contenido que almacenará el IconButton, comúnmente es un Icon.

Material 3

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
)

Atributo	Descripción
onClick	Función lambda que es llamada cuando el botón es presionado.
modifier	Modificador que implementará el composable (Opcional).
enabled	Controla el estado del componente. Sí el valor es falso, entonces el componente no responderá a la acción de click, también se mostrará como deshabilitado visualmente.
colors	Contiene información sobre el color del IconButton a través de diferentes estados. Por defecto usa IconButtonDefaults.iconButtonColors().
interactionSource	Representa una serie de interacciones para este componente. Se puede crear un objeto personalizado a través de remember { MutableInteractionSource() }.
content	Contenido que almacenará el IconButton, comúnmente es un Icon.

Fuente

Puedes acceder a la documentación oficial de Google desde aquí.

Ejemplos

Material

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings

@Composable
fun MyIconButton() {
    IconButton(
        onClick = { /*TODO*/ },
        modifier = Modifier.size(60.dp),
    ){
        Icon(imageVector = Icons.Filled.Settings, contentDescription = "Settings")
    }
}

Material 3

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconButtonDefaults

@Composable
fun MyIconButton() {
    IconButton(
        onClick = { /*TODO*/ },
        modifier = Modifier.size(70.dp),
        colors = IconButtonDefaults.iconButtonColors(
            containerColor = Color.LightGray,
            contentColor = Color.Red
        )
    ) {
        Icon(imageVector = Icons.Filled.Home, contentDescription = "Home")
    }
}