History
Loading...
Learn a little bit every day
Learn a little bit every day
Loading...
September 18, 2025
ContentUnavailableView with custom actions to guide users when content is missing. Add .contentUnavailableView() modifier to handle empty collections elegantly without manual empty state logic.ContentUnavailableView provides a native, consistent way to handle empty states with proper spacing, typography, and accessibility built-in. It automatically adapts to system settings and provides clear visual hierarchy with title, description, and action buttons.
struct TaskListView: View {
@State private var tasks: [Task] = []
@State private var isLoading = false
var body: some View {
NavigationView {
Group {
if isLoading {
ProgressView("Loading tasks...")
} else if tasks.isEmpty {
ContentUnavailableView(
"No Tasks Yet",
systemImage: "checkmark.circle",
description: Text("Create your first task to get organized")
) {
Button("Add Task") {
addNewTask()
}
.buttonStyle(.borderedProminent)
}
} else {
List(tasks) { task in
TaskRow(task: task)
}
}
}
.navigationTitle("Tasks")
}
}
private func addNewTask() {
// Add task logic
}
}Empty states are critical UX moments that can either frustrate or guide users. Using ContentUnavailableView ensures consistency with system apps, reduces custom UI code, and provides better accessibility support compared to custom empty state implementations.