Ícones

O componente Chip é um elemento compacto interativo que representa uma entrada, um atributo ou uma ação.

Anatomia

Os ícones podem conter até dois rótulos de texto e uma figura opcional. É necessário ter pelo menos um rótulo de texto ou uma figura. Se o texto do rótulo for muito longo, ele pode ficar truncado no ícone. O rótulo principal pode ocupar uma linha de texto, caso o ícone tenha dois rótulos, e até duas linhas caso tenha um só.

A. Rótulo principal
B. Rótulo secundário (opcional)
C. Figura (opcional)
D. Contêiner

Recomendações de design

Ícone com imagem

Os ícones de imagem contêm ações relacionadas à imagem escolhida. Os ícones de imagem funcionam bem para comunicar uma aparência mais específica.

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

Use esses ícones para ações relacionadas ao avatar selecionado. Os ícones de avatar também podem incluir figuras para facilitar o reconhecimento, como a foto de um contato. Os ícones de avatar têm 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)
        )
    }
)
Ícone compacto

O componente relacionado CompactChip é uma variante menor do componente de ícone, projetado para casos de uso em que há menos espaço. Os ícones compactos têm um slot para uma figura e outro para um rótulo com uma linha. Os ícones compactos incluem uma área tocável com altura de 48 dp.

Hierarquia

Use preenchimentos de cores diferentes para indicar a hierarquia de ícones. Projete cada tela para conter um único ícone em destaque para a ação principal.

Prioridade alta
Use ícones de prioridade alta para ações principais na página. Use cores primárias para o preenchimento desse tipo de ícone.

Prioridade média
Use ícones de prioridade média para ações menos importantes do que as principais. Use cores secundárias para o preenchimento desse tipo de ícone.

Se preferir, use o componente personalizado OutlinedChip. Esse componente tem um plano de fundo transparente, um traço colorido da variante de 60% de opacidade e conteúdo com a cor principal.

Prioridade baixa
Os ícones de prioridade baixa têm um preenchimento transparente e apenas um rótulo de texto. Use ícones de prioridade baixa para indicar uma relação filha com um ícone principal ou secundário.

Tamanhos

Ícone padrão

Figura: 24 dp
Altura: 52 dp

Ícone compacto

Figura: 20 dp
Altura: 32 dp
Área tocável: 48 dp

Uso

Veja a seguir alguns exemplos de uso de ícones, como ícones padrão nas configurações e de imagem em um app de exercício.