Button

Os botões são componentes fundamentais que permitem ao usuário acionar um à ação. Há cinco tipos de botões. A tabela a seguir descreve aparência de cada um dos cinco tipos de botão, bem como onde você deve usar para resolvê-los com rapidez.

Tipo

Aparência

Objetivo

Sólido

Plano de fundo sólido com texto em contraste.

Botões de alta ênfase. São para ações principais em um aplicativo, como "enviar" e "salvar". O efeito de sombra enfatiza a importância do botão.

Tonalidade preenchida

A cor de fundo varia para combinar com a superfície.

Também para ações principais ou significativas. Os botões preenchidos têm mais peso visual e são adequados para funções como "Adicionar ao carrinho" e "Fazer login".

Elevada

Destaca-se por ter uma sombra.

Ajusta uma função semelhante aos botões tonais. Aumente a elevação para que o botão apareça ainda mais.

Delineado

Apresenta uma borda sem preenchimento.

Botões de ênfase média, contendo ações que são importantes, mas não principais. Eles funcionam bem com outros botões para indicar ações secundárias e alternativas, como "Cancelar". ou "Voltar".

Texto

Mostra texto sem plano de fundo ou borda.

Botões de baixa ênfase, ideais para ações menos críticas, como links de navegação, ou funções secundárias como "Saiba mais" ou em "Mais detalhes".

A imagem a seguir demonstra os cinco tipos de botões no Material Design.

Exemplo de cada um dos cinco componentes de botão, com as características únicas destacadas.
Figura 1. Os cinco componentes dos botões.

Superfície da API

  • onClick: a função chamada quando o usuário pressiona o botão.
  • enabled: quando "false", este parâmetro faz com que o botão apareça. indisponível ou inativo.
  • colors: uma instância de ButtonColors que determina as cores usadas em o botão.
  • contentPadding: o padding dentro do botão.

Botão preenchido

O componente do botão preenchido usa o elemento combinável Button básico. Ele é preenchido com uma cor sólida por padrão. O snippet a seguir demonstra como implementar o componente:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Essa implementação aparece da seguinte maneira:

Um botão preenchido com um plano de fundo roxo que diz "preenchido".
Figura 2. Um botão preenchido.

Botão tonal preenchido

O componente do botão tonal preenchido usa o elemento combinável FilledTonalButton. Ele é preenchido com uma cor tonal por padrão.

O snippet a seguir demonstra como implementar o componente:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Essa implementação aparece da seguinte maneira:

Um botão tonal com um fundo roxo-claro que diz "preenchido".
Figura 3. Um botão tonal.

Botão circunscrito

O componente do botão descrito usa o elemento combinável OutlinedButton. Ele aparece com um contorno por padrão.

O snippet a seguir demonstra como implementar o componente:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Essa implementação aparece da seguinte maneira:

Um botão transparente com contorno e uma borda escura que mostra a mensagem "Outlined".
Figura 4. Um botão contornado.

Botão elevado

O componente do botão elevado usa o elemento combinável ElevatedButton. Ela tem uma sombra que representa o efeito de elevação por padrão. Ele é essencialmente um botão delineado com uma sombra.

O snippet a seguir demonstra como implementar o componente:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Essa implementação aparece da seguinte maneira:

Um botão elevado com um plano de fundo cinza que mostra a mensagem "Elevado".
Figura 5. Um botão elevado.

Botão de texto

O componente do botão de texto usa o elemento combinável TextButton. Até ser pressionado, ele aparece apenas como texto. Ele não tem um preenchimento sólido ou contorno por padrão.

O snippet a seguir demonstra como implementar o componente:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Essa implementação aparece da seguinte maneira:

Um botão de texto com a mensagem "Text Button"
Figura 6. Um botão de texto.

Outros recursos