Botões de ícone no Glimmer do Jetpack Compose

Dispositivos XR relevantes
Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.
Saiba mais sobre esses dispositivos →
Óculos de exibição
Saiba mais sobre esses dispositivos →

No Glimmer do Jetpack Compose, um IconButton é um componente compacto e interativo usado para expor ações complementares com um único toque.

Os botões de ícone parecem menores do que os botões padrão, mas mantêm um limite físico para garantir a facilidade de interação nos óculos de exibição.

Para outros casos de uso, também há botões padrão e botões de alternância.

Um exemplo de alguns estilos diferentes de botões de ícone no Glimmer do Jetpack Compose. Estes exemplos mostram cinco estados de botões de ícone: ativado (1), em foco (2), pressionado (3), desativado (4), desativado e em foco (5).

Tamanhos e dimensões

Elemento Dimensão

Tamanho mínimo do contêiner

48 x 48 dp

Tamanho do ícone interno

32 x 32 dp

Padding de conteúdo padrão

GlimmerTheme.componentSpacingValues.small

Estados

Os botões de ícone no Glimmer do Jetpack Compose mudam de aparência para comunicar o estado deles.

  • Ativado: é o estado interativo padrão.
  • Focado: aplica GlimmerTheme.depthEffectLevels.level1 e um destaque de borda focado.
  • Pressionado: aplica uma sobreposição branca semitransparente à superfície.
  • Desativado: o botão não é interativo, e o feedback visual é removido.

Padrões de botões de ícone

Os padrões a seguir se aplicam aos botões de ícone:

  • Formato: o padrão é GlimmerTheme.shapes.large (normalmente circular).
  • Cor: o padrão é GlimmerTheme.colors.surface.
  • Cor do conteúdo: calculada automaticamente com base na cor de segundo plano, a menos que seja fornecida explicitamente.
  • Padding de conteúdo: fornece o espaçamento padrão entre o ícone e a borda do contêiner.
  • Tamanho mínimo: um valor 48.dp fixo para evitar que os botões fiquem muito pequenos para interagir.
  • Tamanho do ícone: o padrão é GlimmerTheme.iconSizes.small (32.dp).

Exemplo: botão de ícone

O código a seguir cria um botão de ícone com características padrão:

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}