Botões no Jetpack Compose Glimmer

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 Button é um componente interativo otimizado para entrada de óculos de exibição, oferecendo feedback visual claro nos estados para orientar as ações do usuário.

Os botões são criados no sistema de superfície do Glimmer do Jetpack Compose, que processa automaticamente propriedades físicas, como bordas e profundidade.

O botão padrão contém um rótulo de texto e ícones opcionais. Ele pode ser usado para ações principais ou secundárias. Também há botões especializados, como botões de ícone e botões de alternância, que são definidos como componentes separados no Glimmer do Jetpack Compose.

Padrão

Um exemplo de alguns estilos diferentes de botões no Glimmer do Jetpack Compose. Esses exemplos mostram botões padrão de tamanho médio com três estados: ativado (1), em foco (2) e pressionado (3).

Grande

Um exemplo de alguns estilos diferentes de botões no Glimmer do Jetpack Compose. Esses exemplos mostram botões grandes com três estados: ativado (1), em foco (2) e pressionado (3).

Anatomia

Um botão consiste em um contêiner e um rótulo, com ícones opcionais à esquerda e à direita.

Parte Descrição

Contêiner

A superfície de plano de fundo do botão.

Rótulo

O texto que descreve a ação.

Ícone (opcional)

Indicadores visuais à esquerda ou à direita.

Tamanhos

Os botões do Glimmer do Jetpack Compose oferecem suporte a duas variantes de tamanho. Elas afetam a altura mínima e o preenchimento interno.

Tamanho Altura mínima Uso padrão

Médio

48.dp

Ações e listas padrão (padrão).

Grande

72.dp

Ações de alta ênfase ou pontos de entrada da tela principal.

Estados

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

  • Ativado: o estado padrão de um botão interativo.
  • Em foco: quando em foco, o botão aplica um GlimmerTheme.depthEffectLevels.level1 e um destaque de borda.
  • Pressionado: quando ativada, uma sobreposição branca semitransparente é aplicada à superfície.
  • Desativado: o botão não responde à entrada e a aparência visual é ajustada.

Padrões de botão

Os padrões a seguir se aplicam a botões padrão:

  • Por padrão, os botões usam GlimmerTheme.typography.bodySmall. Confira se o texto nos botões é conciso e descreve claramente a ação.
  • O formato padrão de um botão é GlimmerTheme.shapes.large. Esse arredondamento consistente ajuda os usuários a identificar botões na interface dos óculos de exibição.

Exemplo: botão com texto

O código a seguir cria um botão padrão com texto:

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

Exemplo: botões com ícones à esquerda e à direita

Também é possível adicionar ícones ao início (usando leadingIcon) ou ao final (usando trailingIcon) do texto para fornecer contexto adicional.

O código a seguir cria um botão com um ícone à esquerda:

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}