SwiftUI Badges for Toolbars & Tab Bars in iOS 26

In iOS 26.0 and later, SwiftUI introduces the ability to display badges directly on toolbar items. This makes it easier to highlight counts, notifications, or status indicators in places like the navigation bar or tab bar without writing extra custom code.

You can achieve this with the familiar .badge() modifier, which you may have already used with TabView. Now, the same modifier works seamlessly with ToolbarItem as well. For example, you can attach a numeric badge to a toolbar button representing a cart, inbox, or notification center. The badge will automatically adapt its style to match the system look and feel, making your app consistent with other iOS interfaces.

While updating our course “Mastering SwiftUI: iOS 26 App Development Bootcamp”, we realized this new feature fits perfectly with the e-commerce app we’re building as part of the curriculum. That’s why I’ll be using the course project setup to demonstrate how it works. This way, you’ll see just how simple it is to integrate the feature into your own apps.

If you’re ready to begin your App development journey, this course is the perfect place to start. It’s designed to guide you step by step, making it easy to build real apps while learning modern iOS development. You can get access to the course here.

Mastering SwiftUI: iOS 26 App Development Bootcamp
Learn SwiftUI from scratch with a hands-on approach. Start by building a complete app in iOS 26 to see how simple and…www.devtechie.com

Here’s the current setup: whenever an item is added to the cart, a badge automatically appears on the cart tab, giving users a clear visual cue.

We achieved this by simply applying the .badge modifier directly to the tab item.

import SwiftUI

struct ContentView: View {
    ...
    var body: some View {
        TabView {
            ...
            
            CartView()
                .tabItem {
                    Image(systemName: "cart")
                    Text("Cart")
                }
                .badge(cartViewModel.addedCourses.count)
        }
        ...
    }
}

We’ll add a new toolbar item to the course homepage, where all DevTechie video courses are listed. Whenever a user adds a course to the cart, the badge count will update in real time, providing instant visual feedback.

struct CoursesHome: View {
   ...
    @Environment(CartViewModel.self) private var cartViewModel
    
    var body: some View {
        NavigationStack {
            ...
            .navigationDestination(for: Course.self) { course in
                CourseDetailView(course: course, courses: courses)
            }
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Image(systemName: "cart")
                        .badge(cartViewModel.addedCourses.count)
                }
            }
        }
    }
}

Currently, the cart toolbar item doesn’t perform any action since it’s just an image. We can easily fix this by turning it into a button, allowing us to navigate the user programmatically to the cart view. To implement this, we’ll make a few updates in both the ContentView and CoursesHome view.

We’ll begin by updating the ContentView. First, add a state property called selectedTab to keep track of the currently selected tab. This will allow us to programmatically switch tabs when the user interacts with the toolbar button.

struct ContentView: View {
    @State private var cartViewModel = CartViewModel()
    @State private var selectedTab: Int = 0

Next, we’ll update the TabView to support programmatic tab selection. By binding the TabView’s selection to our selectedTab state property, we can switch tabs dynamically in response to user actions, such as tapping the cart toolbar button.

struct ContentView: View {
    ...
    var body: some View {
        TabView(selection: $selectedTab) {

To identify each tab programmatically, we’ll assign a tag to each TabView item. We’ll use 0 for the CoursesHome page and 1 for the CartView, allowing us to switch between them using the selectedTab state property.

struct ContentView: View {
   ...  
    var body: some View {
        TabView(selection: $selectedTab) {
            CoursesHome(selectedTab: $selectedTab)
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
                .tag(0)
            
            CartView()
                .tabItem {
                    Image(systemName: "cart")
                    Text("Cart")
                }
                .badge(cartViewModel.addedCourses.count)
                .tag(1)
        }
...

Notice that we’re passing selectedTab as a binding to the CoursesHome view. This ensures that when selectedTab is updated from within CoursesHome, the change is reflected in ContentView, allowing the tabs to switch dynamically. Next, we’ll update the CoursesHome page to implement this functionality.

Create a binding property for selectedTab in CoursesHome view

struct CoursesHome: View {
    @State var courses: [Course] = []
    @Environment(CartViewModel.self) private var cartViewModel
    @Binding var selectedTab: Int

Next, we’ll update the toolbar by replacing the image with a button. The button’s action will set selectedTab to 1, which corresponds to the CartView tab, enabling the user to navigate there programmatically.

struct CoursesHome: View {
    @State var courses: [Course] = []
    @Environment(CartViewModel.self) private var cartViewModel
    @Binding var selectedTab: Int
    
    var body: some View {
   
           ...
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        selectedTab = 1
                    } label: {
                        Image(systemName: "cart")
                            .badge(cartViewModel.addedCourses.count)
                    }
                }
            }
        }
    }
}

Visit us at https://www.devtechie.com for more