Tab Items & Badges
Add icons, titles, and notification badges.
Tab Items & Badges 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.
Polishing Each Tab
Now you will make each tab clearer with the right icon, a short title, and a notification badge when needed. 🎨
Icons with SF Symbols
Pass an SF Symbol name to Label so each tab gets a crisp, scalable icon that matches the system style.
Label("Profile", systemImage: "person.crop.circle")Keep Titles Short
Tab titles sit in a tight space, so keep them to one clear word like Home, Search, or Profile.
Selected vs Unselected
iOS automatically highlights the active tab. Many symbols even swap to a filled variant when selected, with no code from you.
Choosing Good Symbols
Pick symbols whose meaning is obvious. A house for home and a gear for settings need no explanation.
What a Badge Shows
A badge is the small red bubble on a tab that signals unread items, like new messages waiting for you. 🔴
Adding a Number Badge
The badge modifier puts a count on a tab. Pass a number and the bubble appears automatically.
InboxScreen()
.tabItem { Label("Inbox", systemImage: "tray") }
.badge(3)Text Badges
You can also pass a string to badge, useful for short markers like "New" instead of a count.
.badge("New")Hiding a Badge
Set the badge to zero or an empty value and SwiftUI hides the bubble, so it appears only when it matters.
.badge(unreadCount)Driving Badges from State
Bind the badge to a state value so the count updates live as new items arrive or get read.
Badges Demand Attention
Use badges sparingly. A bubble pulls the eye, so reserve it for things the user truly needs to notice. 👀
Quick Check
Let us check how to show an unread count on a tab.
Recap: Tab Items & Badges
Clear icons and short titles make tabs scannable, and the badge modifier surfaces counts or markers right when users need them. 🎉
Frequently asked questions
Is the “Tab Items & Badges” lesson free?
Yes — the full text of “Tab Items & Badges” 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 “Tab Items & Badges”?
Add icons, titles, and notification badges. 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 “Tab Items & Badges” 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
- Building a Tab Bar
- Tab Items & Badges
- Selected Tab Binding
- Combining Tabs with Stacks