Button

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ões e onde eles devem ser usados.

Tipo	Aparência	Finalidade
Sólido	Fundo sólido com texto contrastante.	Botões de prioridade alta. São para ações principais em um aplicativo, como "enviar" e "salvar". O efeito de sombra enfatiza a importância do botão.
Tonal preenchido	A cor do plano de fundo varia para corresponder à superfície.	Também para ações principais ou significativas. Os botões preenchidos oferecem mais peso visual e são adequados para funções como "Adicionar ao carrinho" e "Fazer login".
Elevada	Se destaca por ter uma sombra.	Desempenha uma função semelhante aos botões tonais. Aumente a elevação para que o botão apareça ainda mais em destaque.
Delineado	Apresenta uma borda sem preenchimento.	Botões de prioridade média, que contêm ações importantes, mas não principais. Eles combinam bem com outros botões para indicar ações alternativas e secundárias, como "Cancelar" ou "Voltar".
Texto	Mostra o 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 "Ver detalhes".

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

Figura 1. Os cinco componentes de botão.

Superfície da API

• onClick: a função chamada quando o usuário pressiona o botão.
• enabled: quando é "false", 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 de botão preenchido usa o elemento combinável Button básico. Ela é 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

Observação: se você quiser criar um botão personalizado, use o elemento combinável Button.

Esta implementação aparece da seguinte maneira:

Figura 2. Um botão preenchido.

Botão tonal preenchido

O componente de 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

Esta implementação aparece da seguinte maneira:

Figura 3. Um botão tonal.

Botão contornado

O componente de botão com contorno 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

Esta implementação aparece da seguinte maneira:

Figura 4. Um botão contornado.

Botão elevado

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

O snippet a seguir demonstra como implementar o componente:

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

Esta implementação aparece da seguinte maneira:

Figura 5. Um botão elevado.

Botão de texto

O componente de botão de texto usa o elemento combinável TextButton. Até ser pressionado, ele aparece apenas como texto. Ela não tem um preenchimento ou contorno sólido 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

Esta implementação aparece da seguinte maneira:

Figura 6. Um botão de texto.

Outros recursos

• Botão de ação flutuante
• Documentação da Material UI