# Empty state screens

> Empty state and error screens from a Figma UI kit for iOS and Android apps: no trips, an empty cart, no transactions and a failed request, each with one action.

What a screen shows when it has nothing to show, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. All four use one Empty State component: an icon, a headline, one line and the action that fills the screen.

Page: https://www.appetiteui.com/screens/patterns/empty-state.

## Screens

| App | Screen | What it shows | Page |
| --- | --- | --- | --- |
| Booking app | Trips empty | The state of a traveler with no bookings | https://www.appetiteui.com/docs/screens-booking |
| Food delivery app | Cart empty | The state of a cart with nothing in it | https://www.appetiteui.com/screens/food-delivery/cart |
| Empty state flow | Add money | Nothing has happened yet and one action fixes that | https://www.appetiteui.com/docs/screens-empty-state |
| Empty state flow | Error | A request failed and the user can retry or go back | https://www.appetiteui.com/docs/screens-empty-state |

## Rules

- Say what is missing, then what fills it. No trips booked yet, then Start searching. The headline names the empty thing and the button is the first step to change it.
- Keep the frame. An empty list keeps its top bar and tab bar, so people know where they are and how to leave.
- An error is an empty state with a retry. A failed request uses the same component in its error type, with Try again first and Go back second.

## iOS and Material

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Tab bar height | 49 pt | 64 dp | `platform/bar/bottom-height` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Dialog | iOS / Alert, 300 wide at radius 32 | M3 / Basic dialog, 304 wide at radius 24 | Material has Basic, List and Scrollable list dialogs, iOS draws the alert as glass |

## Questions

### Should an empty screen keep its tab bar?

Yes. An empty list keeps its top bar and tab bar so people know where they are and how to leave; only the content area changes. Appetite UI’s empty Trips keeps both, and its empty Cart keeps its top bar.

### What button belongs on an empty state?

The first step that fills the screen: Start searching on an empty trips list, Browse restaurants on an empty cart, Add money on an empty wallet. One button, and a quiet way back where the screen was opened from elsewhere.

## Sources

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

## Related

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