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. Elas 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 terno, 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 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 importantes, como links de navegação, ou funções secundárias como "Saiba mais" ou "Ver 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, este 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 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 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") } }
Essa implementação aparece da seguinte maneira:
Botão contornado
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") } }
Essa implementação aparece da seguinte maneira:
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. Esse é
essencialmente 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") } }
Essa implementação aparece da seguinte maneira:
Botão "Texto"
O componente do botão de texto usa o elemento combinável TextButton
. Até que seja pressionado,
ele aparece apenas 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") } }
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)