Estilizando botões
Aplique estilos de botão integrados e aparências personalizadas.
Estilizando botões é uma aula grátis de SwiftUI 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 SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Default Looks Are Fine
SwiftUI gives every button a sensible default style for the platform. But you can reshape its look in seconds with a single modifier. 🎨
The buttonStyle Modifier
Apply a built-in look with the buttonStyle modifier. It changes the whole appearance without you touching the label or action.
Button("Save") { save() }
.buttonStyle(.bordered)Bordered for Soft Buttons
The .bordered style draws a soft, tinted capsule around your label. It is great for secondary actions that should look calm.
Button("Cancel") { dismiss() }
.buttonStyle(.bordered)Prominent for the Main Action
Use .borderedProminent to make the primary action pop with a filled background. Reserve it for the one button that matters most.
Button("Continue") { next() }
.buttonStyle(.borderedProminent)Tinting a Button
Set the accent color of a styled button with the tint modifier. It changes the fill or border to match your brand.
Button("Delete") { remove() }
.buttonStyle(.borderedProminent)
.tint(.red)Controlling Size
The controlSize modifier scales a button between mini, small, regular, and large, so it fits the importance of the action.
Button("Go") { go() }
.buttonStyle(.bordered)
.controlSize(.large)Rounding the Corners
Want a different shape? Pair a style with buttonBorderShape to switch between capsule, rounded rectangle, and more.
Button("Join") { join() }
.buttonStyle(.bordered)
.buttonBorderShape(.capsule)Styling the Label Yourself
For full control, style the label view directly with padding, background, and color, just like any other SwiftUI view.
Button("Buy") { buy() }
.padding()
.background(.blue)
.foregroundStyle(.white)Order of Modifiers
Modifier order matters. Padding before background gives roomy color; background before padding leaves an outer margin instead.
Plain and Borderless
For a text-only look with no chrome, reach for the .plain style. It strips decoration so only your label shows.
Button("Skip") { skip() }
.buttonStyle(.plain)Keep It Consistent
Pick a few styles and reuse them across your app. Consistency helps people instantly know what is tappable and what is primary.
Quick Check
Time to test your styling instincts.
Recap
Great job! Use buttonStyle for built-in looks, tint and controlSize to refine them, or style the label directly for full control. 🎨
Perguntas Frequentes
A aula “Estilizando botões” é grátis?
Sim — o texto completo de “Estilizando botões” é 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 SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.
O que vou aprender em “Estilizando botões”?
Aplique estilos de botão integrados e aparências personalizadas. Você pratica SwiftUI 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 SwiftUI Academy?
Nenhuma experiência prévia é necessária. SwiftUI 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 “Estilizando botões”?
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 SwiftUI Academy?
Sim. Cada aula de SwiftUI 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.