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.
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 deButtonColors
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") } }
Essa implementação aparece da seguinte forma:
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") } }
Essa implementação aparece da seguinte forma:
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") } }
Essa implementação aparece da seguinte forma:
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") } }
Essa implementação aparece da seguinte forma:
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") } }
Essa implementação aparece da seguinte forma: