Botão

keywords: AiAssisted, product:JetpackCompose

Os botões são componentes fundamentais que permitem ao usuário acionar uma ação definida. Há cinco tipos de botões. Esta tabela 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. Elas são para ações principais em um aplicativo, como "enviar" e "salvar". O efeito de sombra destaca 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 tonais 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. Tem uma finalidade 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 críticas, como links de navegação ou funções secundárias, como "Saiba mais" ou "Ver detalhes".

Esta imagem demonstra os cinco tipos de botões no Material Design:

Um exemplo de cada um dos cinco componentes de botão, com as características únicas destacadas.
Figura 1. Os cinco componentes de botão.

Superfície da API

onClick
A função que o sistema chama 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 mostra como implementar o componente:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Essa implementação aparece como mostrado:

Um botão preenchido com um plano de fundo roxo que diz "Preenchido".
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 mostra como implementar o componente:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Essa implementação aparece como mostrado:

Um botão tonal com um plano de fundo roxo claro que diz "Tonal".
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 mostra como implementar o componente:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Essa implementação aparece como mostrado:

Um botão transparente com contorno e uma borda escura que mostra a mensagem "Contorno".
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. É um botão preenchido que inclui uma sombra.

O snippet mostra como implementar o componente:

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

Essa implementação aparece como mostrado:

Um botão elevado com um fundo cinza que diz "Elevado".
Figura 5. Um botão elevado.

Botão de texto

O componente de botão de texto usa o elemento combinável TextButton. Ele aparece como apenas texto até ser pressionado. Ela não tem um preenchimento ou contorno sólido por padrão.

O snippet mostra como implementar o componente:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Essa implementação aparece como mostrado:

Um botão de texto com a mensagem "Botão de texto"
Figura 6. Um botão de texto.

Outros recursos