Styling Buttons
Apply built-in button styles and custom looks.
Styling Buttons is a free SwiftUI Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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. 🎨
Frequently asked questions
Is the “Styling Buttons” lesson free?
Yes — the full text of “Styling Buttons” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Styling Buttons”?
Apply built-in button styles and custom looks. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Styling Buttons” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.