Botão

Os botões são componentes fundamentais que permitem ao usuário acionar uma ação definida. Há cinco tipos de botões. A tabela a seguir descreve a aparência de cada um dos cinco tipos de botão e onde eles precisam ser usados.

Tipo

Aparência

Objetivo

Sólido

Plano de fundo sólido com texto contrastante.

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

Tonalidade preenchida

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

Também para ações principais ou significativas. Os botões preenchidos oferecem mais peso visual e funções adequadas, como "adicionar ao carrinho" e "Fazer login".

Elevada

Ela se destaca com sombras.

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

Delineado

Apresenta uma borda sem preenchimento.

Botões de ênfase média, contendo ações 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 importantes, como links de navegação, ou funções secundárias, como "Saiba mais" ou "Visualizar detalhes".

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

Um exemplo de cada um dos cinco componentes do botão, com as características únicas destacadas.
Figura 1. Os cinco componentes do botão.

Plataforma da API

  • onClick: a função chamada quando o usuário pressiona o botão.
  • enabled: quando falso, esse parâmetro faz com que o botão apareça indisponível e inativo.
  • colors: uma instância de ButtonColors que determina as cores usadas no 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 abaixo demonstra como implementar o componente:

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

Essa implementação aparece da seguinte forma:

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. Ela é preenchida 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 forma:

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

Botão contornado

O componente do botão descrito usa o elemento combinável OutlinedButton. Por padrão, ele aparece com um contorno.

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 forma:

Um botão contornado transparente com uma borda escura que diz "Contornado".
Figura 4. Um botão com contorno.

Botão elevado

O componente do botão elevado usa o elemento combinável ElevatedButton. Ele tem uma sombra que representa o efeito de elevação por padrão. Basicamente, é 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 forma:

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

Botão "Texto"

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

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 forma:

Um botão de texto que diz "Botão de texto"
Figura 6. Um botão de texto.

Outros recursos