Contents

ContentUnavailableView

An interface, consisting of a label and additional content, that you display when the content of your app is unavailable to users.

Declaration

struct ContentUnavailableView<Label, Description, Actions> where Label : View, Description : View, Actions : View

Overview

It is recommended to use ContentUnavailableView in situations where a view’s content cannot be displayed. That could be caused by a network error, a list without items, a search that returns no results etc.

You create an ContentUnavailableView in its simplest form, by providing a label and some additional content such as a description or a call to action:

ContentUnavailableView {
    Label("No Mail", systemImage: "tray.fill")
} description: {
    Text("New mails you receive will appear here.")
}

The system provides default ContentUnavailableViews that you can use in specific situations. The example below illustrates the usage of the search view:

struct ContentView: View {
    @ObservedObject private var viewModel = ContactsViewModel()

    var body: some View {
        NavigationStack {
            List {
                ForEach(viewModel.searchResults) { contact in
                    NavigationLink {
                        ContactsView(contact)
                    } label: {
                        Text(contact.name)
                    }
                }
            }
            .navigationTitle("Contacts")
            .searchable(text: $viewModel.searchText)
            .overlay {
                if searchResults.isEmpty {
                    ContentUnavailableView.search
                }
            }
        }
    }
}

Topics

Getting built-in unavailable views

Creating an unavailable view

Supporting types