# Booking app confirmation

> A booking confirmation screen for Figma: a green check, the reference, a trip summary and next steps, with the trips list it lands in, light and dark.

What a traveler sees after paying, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: a green check, Booking confirmed with a reference number, a trip summary card, three next-step rows, and View trip and Message Maren. Trips then holds the stay as an Upcoming card, In 3 weeks.

Page: https://www.appetiteui.com/screens/booking/confirmation. Every screen of the app: https://www.appetiteui.com/docs/screens-booking.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Confirmed | A confirmation, a reference and the next three steps | Button, Lucide icons |
| Trips | An upcoming trip as a large card and later trips as rows | Top Bar, Section Header, Vertical Card, Horizontal Card, Navigation |

- Confirmed, light: Booking app Confirmed screen: a green check, Booking confirmed with a reference number, a trip summary card, three next-step rows and View trip and Message Maren buttons
  Picture: https://www.appetiteui.com/images/au_booking_confirmed_light.webp (dark: https://www.appetiteui.com/images/au_booking_confirmed_dark.webp)
- Trips, light: Booking app Trips screen: an Upcoming card for Lakeside cabin with an In 3 weeks label, and Later this year rows for Harbor loft with a Pay balance label and Coastal house with a Confirmed label, above a floating tab bar
  Picture: https://www.appetiteui.com/images/au_booking_trips_light.webp (dark: https://www.appetiteui.com/images/au_booking_trips_dark.webp)

## How the screen follows the order tracking pattern

| Rule | On this screen |
| --- | --- |
| Lead with the arrival time | Booking confirmed leads the screen in place of an arrival time: the reference sits right under it, the thing a traveler is asked for later. |
| Steps, not a percentage | Three next-step rows say what happens now instead of a bar of progress, each one a sentence. |
| The person is one tap away | Message Maren puts the host one tap away, beside View trip, before the traveler has to look for her. |

## Built from

| Component | Screens |
| --- | --- |
| Button | Confirmed |
| Lucide icons | Confirmed |
| Top Bar | Trips |
| Section Header | Trips |
| Vertical Card | Trips |
| Horizontal Card | Trips |
| Navigation | Trips |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| List | iOS / List with a 44 minimum row | M3 / List Item, 56, 72 or 88 high by Lines | Material sets the row height by lines of text, iOS sets only a minimum |

## Related

- Booking app: [Booking app search and filters](https://www.appetiteui.com/screens/booking/search-and-filters)
- Booking app: [Booking app checkout](https://www.appetiteui.com/screens/booking/checkout)
- Docs: [Booking app screens, every screen and token](https://www.appetiteui.com/docs/screens-booking)
- Food delivery app: [Food delivery app order tracking](https://www.appetiteui.com/screens/food-delivery/order-tracking)
- Docs: [Progress Steps](https://www.appetiteui.com/docs/progress-steps)