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 contrastante.	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 do plano de fundo varia de acordo com a superfície.	Também para ações principais ou significativas. Botões preenchidos oferecem mais peso visual e funções de agasalhos, como "adicionar ao carrinho" e em "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 com ainda mais destaque.
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 abaixo demonstra os cinco tipos de botões no Material Design.

Plataforma 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 do botão.

Botão preenchido

O componente do botão preenchido usa o elemento combinável Button básico. É preenchida 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:

Botão tonal preenchido

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

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:

Botão contornado

O componente do botão descrito usa o elemento combinável OutlinedButton. Ela 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:

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. Observe que ele é basicamente um botão contornado 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:

Botão "Texto"

O componente do botão de texto usa o elemento combinável TextButton. Até ser pressionado, ele será exibido somente como texto. Por padrão, ele não tem um preenchimento ou contorno 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 maneira:

Outros recursos

• Botão de ação flutuante
• Documentos sobre a interface do Material Design (link em inglês)