Ícones
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O componente Ícone é um elemento interativo que representa uma entrada, um atributo ou uma ação.
Recomendações de linha
Mínimo
Texto principal > 1 linha
Rótulo secundário > 1 linha
Máximo
Texto principal > 2 linhas
Rótulo secundário > 3 linhas
Anatomia
Os ícones podem conter até dois rótulos de texto e uma figura opcional. É necessário fornecer pelo menos um rótulo de texto ou um ícone. Os ícones poderão truncar o texto se o rótulo for muito longo. O rótulo principal será uma linha de texto se o rótulo secundário estiver presente. O rótulo principal pode conter duas linhas de texto se o rótulo secundário não estiver presente.
Se houver apenas um rótulo, ele precisará ser centralizado. Se houver um rótulo ou ícone secundário, eles precisarão ser alinhados à esquerda.
A. Rótulo principal
B. Rótulo secundário (opcional)
C. Ícone (opcional)
D. Contêiner
Gradiente de chips
Ícone padrão
Superior/esquerda = 50% primária
Parte inferior/direita = 0% de superfície
(sobreposições de gradiente em um plano de fundo de cor da superfície)
Ícone de imagem
Parte superior/esquerda = 30% da primária
0, 0, 45° (abaixo de baixo/à direita) = 20% na variante da superfície
Tipos alternativos de ícones
Ícone com imagem de plano de fundo
Os ícones de imagem contêm ações relacionadas à imagem escolhida. Os ícones de imagem funcionam bem para dar uma aparência mais específica.
Recomendamos que eles tenham uma altura fixa de 52 dp.
Ícone de avatar
Use esses ícones para ações relacionadas ao avatar selecionado. Os ícones de avatar também podem incluir outros ícones, como a foto de um contato, para facilitar o reconhecimento. Os ícones de avatar têm 32 x 32 dp.
Ícone compacto
O componente relacionado, CompactChip, é uma variante do componente de ícone que parece menor e foi projetado para casos de uso em que há menos espaço.
Os ícones compactos têm um slot para um ícone e outro para um rótulo de texto de linha única. Os ícones compactos têm uma área tocável com altura de 48 dp.
Hierarquia
Use preenchimentos de cores diferentes para indicar a hierarquia de ícones. Crie cada tela com um único ícone em destaque para a ação principal.
Alta ênfase
Use esses ícones para ações com prioridade alta na página. Use cores primárias como o preenchimento de um ícone de prioridade alta.
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.
Como alternativa, use o componente personalizado OutlinedChip. O ícone delineado tem um plano de fundo transparente, um traço colorido da variante de 60% de opacidade e conteúdo de cor primária.
Prioridade baixa
Os ícones de baixa ênfase 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
Ícone: 24 dp
Altura: 52 dp
Ícone compacto
Ícone: 20 dp
Altura: 32 dp
Área tocável: 48 dp
Uso
Confira exemplos de uso de ícones, como ícones padrão nas configurações e ícones de imagem em um app de exercícios.
Layouts adaptáveis
Comportamento responsivo
Os ícones se esticam para preencher a largura disponível em telas maiores.
Ícone (24 x 24 dp)
Contêiner (52 x XX dp)
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-07-27 UTC."],[],[],null,["# Chips\n\nThe [Chip](/reference/kotlin/androidx/wear/compose/material/package-summary#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component is an interactive element that represents an input, attribute, or action.\n\nLine Recommendations\n--------------------\n\n**Minimum**\n\nPrimary Text \\\u003e 1 Lines \n\nSecondary Label \\\u003e 1 Lines \n\n**Maximum**\n\nPrimary Text \\\u003e 2 Lines \n\nSecondary Label \\\u003e 3 Lines\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nChips can contain up to two text labels and an optional icon. At least one text label or an icon must be provided. Chips may truncate text if the text label is too long. The primary label is one line of text if the secondary label is present. The primary label can contain two lines of text if the secondary label is not present. \n\nIf there's only one label, it should be centered. If a secondary label or icon is present, the labels should be left-aligned. \n\n**A. Primary label\nB. Secondary label (optional)\nC. Icon (optional)\nD. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Chips Gradient**\n------------------\n\n**Standard Chip**\n\nTop/Left = 50% Primary \n\nBottom/Right = 0% Surface \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Chip**\n\nTop/Left = 30% Primary \n\n0, 0, 45° (Below Bottom/Right) = 20% On Surface Variant\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAlternative Chip types\n----------------------\n\n**Chip with background image**\n\nImage chips contain actions which relate to a chosen image. Image chips work well to communicate a more specific look and feel.\n\nIt is recommended that these Chips should have a fixed height of 52 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Avatar Chip**\n\nUse avatar chips for actions that are related to a chosen avatar. Avatar chips can also have icons used to make the avatar more easily recognizable, such as a contact ID photo. Avatar icons are 32x32 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Compact Chip**\n\nThe related component, CompactChip is a variant of the Chip component that appears smaller and is designed for use cases where there is less space. \n\n\nCompact chips have a slot for an icon and a slot for a single line text label. Compact chips have a tappable area with a height of 48 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\nUse different color fills to denote chip hierarchy. Design each screen to contain a single prominent chip for the primary action. \n\n**High emphasis** \n\n\nUse high-emphasis chips for actions that are primary to the page. Use primary colors as the fill of a high emphasis chip. \n\n**Medium emphasis** \n\n\nUse medium emphasis chips for actions that are less important than the primary actions. Use secondary colors for the fill of a medium emphasis chip. \n\n\nAlternatively, use the custom OutlinedChip component. The outlined chip has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content. \n\n**Low emphasis** \n\n\nLow emphasis chips have a transparent fill and only a text label. Use low emphasis chips to indicate a child relationship to a primary or secondary chip.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Sizes**\n\n**Default Chip**\n\nIcon: 24 dp \nHeight: 52 dp \n**Compact Chip**\n\nIcon: 20 dp \nHeight: 32 dp \nTappable Area: 48 dp\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Usage**\n\nSee examples of chip usage such as standard chips in Settings and image chips in an exercise app.\n\n### **Adaptive layouts**\n\n**Responsive behavior**\n\nChips stretch to fill the available width on larger displays. \n\n\nIcon (24 x 24 dp) \n\nContainer (52 x XX dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
