Creating a Tappable Button
Build a Button with a label and an action.
Creating a Tappable Button is a free SwiftUI Academy lesson on CoddyKit — lesson 1 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.
Why Buttons Matter
Most apps come alive when you tap something. A Button is the simplest way to let people trigger an action in SwiftUI. 👆
The Button View
A Button is just a view, like Text or Image. You place it in your body and SwiftUI draws a tappable control for you.
Button("Tap me") {
print("Tapped!")
}Two Parts of a Button
Every button has two parts: a label that you see, and an action that runs when you tap it. Both are required.
The Simple Title Form
The quickest button takes a title string first and the action closure second. SwiftUI turns the string into a Text label for you.
Button("Save") {
saveDocument()
}The Action Closure
The braces hold the action closure. Whatever code you write inside runs once each time the button is tapped, and not before.
Button("Greet") {
print("Hello there")
}A Custom Label
Need more than text? Use the label form: pass an action, then a closure that returns any view you like for the look.
Button {
likePost()
} label: {
Image(systemName: "heart")
}Labels Can Be Rich
Because the label is a view, you can combine an icon and text together inside a stack for a friendlier, clearer tappable area.
Button {
addItem()
} label: {
Label("Add", systemImage: "plus")
}Buttons Live in the Body
A button goes inside your view's body, just like any other view. SwiftUI handles drawing it and listening for taps automatically.
var body: some View {
Button("Continue") {
goNext()
}
}The Tap Target
The whole label area is tappable, so a bigger label is easier to hit. Apple suggests a comfortable tap target of about 44 points.
Calling a Function on Tap
Keep the closure tidy by calling a function instead of cramming logic inline. The action just points to the work you defined elsewhere.
Button("Refresh") {
reloadData()
}No Tap, No Action
The action does not run when the screen loads. It waits patiently and only fires on tap, which keeps your view predictable.
Quick Check
Let's make sure the button basics clicked.
Recap
Nice work! A Button pairs a label you see with an action that runs on tap. Use the simple title form or a custom label view. ✨
Frequently asked questions
Is the “Creating a Tappable Button” lesson free?
Yes — the full text of “Creating a Tappable Button” 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 “Creating a Tappable Button”?
Build a Button with a label and an action. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Creating a Tappable Button” 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.
All lessons in this course
- Creating a Tappable Button
- Styling Buttons
- Running Code on Tap
- Disabling & Enabling Buttons