Botões de Texto, Contornados e de Ícone
Escolha a variante de botão adequada para cada tarefa.
Botões de Texto, Contornados e de Ícone é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Buttons Have Personalities
Not every action deserves a bold filled button. Compose offers several button variants, each signaling a different level of emphasis. 🎨
The Filled Button
The standard Button is filled and high-emphasis. It draws the eye, so save it for the one primary action per screen.
Button(onClick = { pay() }) {
Text("Pay now")
}OutlinedButton for Secondary
An OutlinedButton has just a border and no fill. It reads as a clear-but-secondary choice sitting next to a filled one.
OutlinedButton(onClick = { cancel() }) {
Text("Cancel")
}TextButton for Low Emphasis
A TextButton shows only a label, no border or fill. It is perfect for quiet actions like Learn more or dialog choices.
TextButton(onClick = { dismiss() }) {
Text("Not now")
}Emphasis Is a Hierarchy
Think of it as a ladder of emphasis: filled is loudest, outlined is medium, text is quietest. Match the variant to the action's weight.
Icons Inside Buttons
Any button can hold an Icon plus a label in its content row. Add a small spacer so the icon and text do not touch.
Button(onClick = { add() }) {
Icon(Icons.Default.Add, null)
Spacer(Modifier.width(8.dp))
Text("Add")
}The IconButton
An IconButton is a compact, label-free tap target holding just one icon. It is ideal for toolbars and app-bar actions.
IconButton(onClick = { share() }) {
Icon(Icons.Default.Share, "Share")
}Always Describe Your Icon
Give an icon-only button a contentDescription so screen readers can announce it. A null description hides it from accessibility.
IconButton(onClick = { favorite() }) {
Icon(Icons.Default.Favorite, "Favorite")
}FilledIconButton for Emphasis
Need an icon button that stands out? FilledIconButton adds a solid background, raising its emphasis above the plain version.
FilledIconButton(onClick = { record() }) {
Icon(Icons.Default.Mic, "Record")
}Pick the Right Variant
Choosing well guides users: filled for Confirm, outlined for an alternative, text for dismiss, IconButton for tight spaces.
Same onClick, Different Look
Every variant shares the same onClick contract. You change only the visual weight, never how you wire up the action.
Quick Check
You want a quiet, low-emphasis action with only a label and no border or fill.
Recap: Right Tool, Right Tap
You now have a toolbox: filled Button, OutlinedButton, TextButton, and IconButton. Match emphasis to the action and label your icons. ✨
Perguntas Frequentes
A aula “Botões de Texto, Contornados e de Ícone” é grátis?
Sim — o texto completo de “Botões de Texto, Contornados e de Ícone” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “Botões de Texto, Contornados e de Ícone”?
Escolha a variante de botão adequada para cada tarefa. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Botões de Texto, Contornados e de Ícone”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Button e onClick
- Botões de Texto, Contornados e de Ícone
- Estados Habilitado, Desabilitado e de Carregamento
- clickable em Qualquer Composable