Button
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 deButtonColors
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") } }
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
. 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") } }
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") } }
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") } }
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)