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 tipos de dispositivos XR →
Óculos de exibição
Saiba mais sobre tipos de dispositivos XR →

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 com tela virtual.

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), com foco (2), pressionado (3), desativado (4), desativado e com 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

Preenchimento de conteúdo padrão

GlimmerTheme.componentSpacingValues.small

Estados

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

  • Ativado: o estado interativo padrão.
  • Com foco: aplica GlimmerTheme.depthEffectLevels.level1 e um destaque de borda com foco.
  • 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 seguintes padrões se aplicam aos botões de ícone:

  • Formato: padrão para GlimmerTheme.shapes.large (normalmente circular).
  • Cor: padrão para GlimmerTheme.colors.surface.
  • Cor do conteúdo: calculada automaticamente com base na cor de segundo plano, a menos que seja fornecida explicitamente.
  • Preenchimento de conteúdo: fornece o espaçamento padrão entre o ícone e a borda do contêiner.
  • Tamanho mínimo: um valor fixo de 48.dp para evitar que os botões fiquem muito pequenos para interagir.
  • Tamanho do ícone: padrão para 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 = { /* Handle action */ }) {
        Icon(FavoriteIcon, contentDescription = "Localized description")
    }
}