# Empty state

> An empty state is what a screen shows when it has nothing to show yet: no trips, an empty cart, no messages. A good one names what is missing and offers the action that fills it.

Page: https://www.appetiteui.com/academy/glossary/empty-state. Empty state design for mobile apps.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Content unavailable view | No component; covered in the guidelines | Empty State |

## In practice

An empty state keeps the screen’s frame, its top bar and tab bar, so people know where they are. An error is the same pattern with a retry.

Appetite UI has one Empty State component with info, error and success types, used on the booking Trips, the food delivery Cart and the two screens of the Empty state page.

## Questions

### What should an empty state include?

A headline that names what is missing, one line that says what will appear, and the button that takes the first step, such as Start searching. Keep the top bar and tab bar so the screen is still where people expect it.

### What is the difference between an empty state and an error state?

An empty state means nothing has happened yet; an error means something failed. Appetite UI draws both with one Empty State component, the error type leading with Try again and following with Go back.

## Sources

1. [Apple Developer: ContentUnavailableView](https://developer.apple.com/documentation/swiftui/contentunavailableview)

## Related

- Screens: [Empty state screens](https://www.appetiteui.com/screens/patterns/empty-state)
- Docs: [Alert](https://www.appetiteui.com/docs/alert)
- Docs: [Empty State app screens](https://www.appetiteui.com/docs/screens-empty-state)
- Glossary: [Skeleton screen](https://www.appetiteui.com/academy/glossary/skeleton-screen)
- Glossary: [Toast and snackbar](https://www.appetiteui.com/academy/glossary/toast-snackbar)