Chips

El componente Chip es un elemento compacto interactivo que representa una entrada, un atributo o una acción.

Anatomía

Los chips pueden contener hasta dos etiquetas de texto y un ícono opcional. Se debe proporcionar al menos una etiqueta de texto o un ícono. Los chips pueden truncar el texto si la etiqueta es demasiado larga. La etiqueta principal es una línea de texto si la etiqueta secundaria está presente, pero es de hasta dos líneas de texto si la etiqueta secundaria no lo está.

A. Etiqueta principal
B. Etiqueta secundaria (opcional)
C. Ícono (opcional)
D. Contenedor

Recomendaciones de diseño

Chip de imagen

Los chips de imágenes contienen acciones relacionadas con una imagen elegida. Los chips de imágenes funcionan bien para comunicar una apariencia más específica.

Chip(
    ...
    label = {
        Text(
            text = "Summer Mix",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
         )
    },
    colors = ChipDefaults.imageBackgroundChipColors(
        backgroundImagePainter = painterResource(id = R.drawable.clouds)
    )
)
Chip de avatar

Usa chips de avatar para acciones relacionadas con un avatar elegido. Los chips de avatar también pueden tener íconos que hagan que el avatar sea más fácil de reconocer, como una foto de ID de contacto. Los íconos de avatar son de 32 x 32 dp.

Chip(
    ...
    label = {
        Text(text = "Mark Castle")
    },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = null,
            modifier = Modifier.size(ChipDefaults.LargeIconSize)
                .wrapContentSize(align = Alignment.Center)
        )
    }
)
Chip compacto

El componente relacionado, CompactChip, es una variante del componente Chip que aparece más pequeño y está diseñado para casos de uso en los que hay menos espacio. Los chips compactos tienen un espacio para un ícono y otro para una sola etiqueta de texto de línea. Los chips compactos tienen un área táctil con una altura de 48 dp.

Jerarquía

Usa diferentes rellenos de colores para denotar la jerarquía del chip. Diseña cada pantalla para que contenga un solo chip importante para la acción principal.

Énfasis alto
Usa chips de énfasis alto para las acciones principales de la página. Usa colores primarios como relleno de un chip de énfasis alto.

Énfasis medio
Usa chips de énfasis medio para las acciones menos importantes que las principales. Usa colores secundarios para rellenar un chip de énfasis medio.

Otra opción es usar el componente personalizado OutlinedChip. El chip descrito tiene un fondo transparente, un trazo de color de la variante principal del 60% de opacidad y contenido de color primario.

Énfasis bajo
Los chips de énfasis bajo tienen un relleno transparente y solo una etiqueta de texto. Usa chips de énfasis bajo para indicar una relación secundaria con un chip principal o secundario.

Tamaños

Chip predeterminado

Ícono: 24 dp
Altura: 52 dp

Chip compacto

Ícono: 20 dp
Altura: 32 dp
Área que se puede presionar: 48 dp

Uso

Consulta ejemplos del uso de chips, como los chips estándar en Configuración y los chips de imágenes en una app de ejercicio.