# 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/glossary/empty-state. Empty state design for mobile apps.

## Why it matters

A first-time or cleared screen is what a new person sees first. Left blank, it looks broken.

It is also the place to offer the one action that fills the screen.

## iOS and Android

|  | 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.

## Common mistakes

- Showing an illustration with no action.
- Removing the screen’s frame, its top bar and tab bar.
- Using the same message for an empty screen and an error.

## 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/glossary/skeleton-screen)
- Glossary: [Toast and snackbar](https://www.appetiteui.com/glossary/toast-snackbar)
- Glossary: [Onboarding](https://www.appetiteui.com/glossary/onboarding)