Showing empty states with ContentUnavailableView

Paul Hudson    @twostraws    December 8th 2023

SwiftUI's ContentUnavailableView shows a standard user interface for when your app has nothing to display. I know, that sounds redundant, right? After all, if you have nothing to display, you have nothing to display!

But ContentUnavailableView is perfect for times your app relies on user information that hasn't been provided yet, such as when your user hasn't created any data, or if they are searching for something and there are no results.

As an example, if you were making an app that let users write down Swift code snippets they wanted to remember, it might start with no snippets by default. So, you could use ContentUnavailableView like this:

ContentUnavailableView("No snippets", systemImage: "swift")

That will show a big Swift icon from SF Symbols, plus title text below saying "No snippets".

You can also add an extra line of description text below, specified as a Text view so you can add extra styling such as a custom font, or a custom color:

ContentUnavailableView("No snippets", systemImage: "swift", description: Text("You don't have any saved snippets yet."))

And if you want full control, you can provide individual views for the title and description, along with some buttons to display to help the user to get started:

ContentUnavailableView {
    Label("No snippets", systemImage: "swift")
} description: {
    Text("You don't have any saved snippets yet.")
} actions: {
    Button("Create Snippet") {
        // create a snippet
    }
    .buttonStyle(.borderedProminent)
}

It's a really simple view to use, but it's much better than just showing a blank screen when the user first comes to your app!

Sponsor Hacking with Swift and reach the world's largest Swift community!