Skip to main content
ContentUnavailableView(props: {
    title?: string | Component;
    systemImage?: string;
    description?: string | Component;
    label?: Component;
}): Component;

ContentUnavailableView(props: {
    title?: string | Component;
    systemImage?: string;
    description?: string | Component;
    label?: Component;
}, children: Component[]): Component;
​
title
string | Component
The main title text. Can be a plain string or a styled component.
​
systemImage
string
A system symbol name (SF Symbols) displayed as a large icon above the title.
​
description
string | Component
Descriptive text shown below the title. Can be a plain string or a styled component.
​
label
Component
A custom label component replacing the default title + icon layout.
​
children
Component[]
Optional action buttons or additional content displayed below the description.

​
Support

​
Usage

​
Empty search results

ContentUnavailableView({
    title: "No Results",
    systemImage: "magnifyingglass",
    description: "Try a different search term."
})

​
No content state

ContentUnavailableView({
    title: "No Photos",
    systemImage: "photo.on.rectangle",
    description: "Photos you take will appear here."
})

​
With action button

ContentUnavailableView({
    title: "No Internet Connection",
    systemImage: "wifi.slash",
    description: "Check your connection and try again."
}, [
    Button("Retry", () => refresh())
])

​
Custom label

ContentUnavailableView({
    label: VStack([
        Image({ systemName: "folder" })
            .foregroundStyle(Color("gray"))
            .imageScale("large"),
        Text("No Documents")
            .font("title2")
    ]),
    description: "Create a new document to get started."
}, [
    Button("New Document", () => createDocument())
])

​
See Also