Botão

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ão, bem como onde eles devem ser usados:

Tipo Aparência Finalidade
Sólido Fundo sólido com texto contrastante. Botões de prioridade alta. Eles são usados para ações principais em um aplicativo, como "enviar" e "salvar". O efeito de sombra destaca a importância do botão.
Tonal sólido A cor do plano de fundo varia para combinar com a superfície. Também para ações principais ou significativas. Os botões tonais preenchidos têm mais peso visual e são adequados para funções como "Adicionar ao carrinho" e "Fazer login".
Elevada Destaca-se por ter uma sombra. Tem uma finalidade semelhante à dos botões tonais. Aumente a elevação para que o botão apareça ainda mais em destaque.
Delineado Tem 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 mostra os cinco tipos de botões no Material Design:

Um exemplo de cada um dos cinco componentes de botão, com as características exclusivas 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 como 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 combinável básico Button. Ele é preenchido com uma cor sólida por padrão. O snippet mostra como implementar o componente e visualizá-lo de forma interativa:

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

Botão tonal preenchido

O componente de botão tonal preenchido usa o elemento combinável FilledTonalButton. Por padrão, ele é preenchido com uma cor tonal.

O snippet mostra como implementar o componente e visualizá-lo de forma interativa:

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

Botão com contorno

O componente de botão com contorno usa o elemento combinável OutlinedButton. Ele aparece com um contorno por padrão.

O snippet mostra como implementar o componente e visualizá-lo de forma interativa:

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

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 e visualizá-lo de forma interativa:

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

Botão de texto

O componente de botão de texto usa o elemento combinável TextButton. Ele aparece apenas como texto até ser pressionado. Por padrão, ele não tem preenchimento sólido nem contorno.

O snippet mostra como implementar o componente e visualizá-lo de forma interativa:

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

Outros recursos