BookingCard

Compact booking summary with code, status badge, guest, hotel, dates and total in SAR. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue
import { UiBookingCard } from '@ziyarago/ui/vue'

Statuses

BK-20418Confirmed
OH
Omar Hassan
Swissotel Makkah
12 - 19 MarSAR 9 800
BK-20419Pending
AR
Aisha Rahman
Dar Al Iman
14 - 18 MarSAR 4 200
BK-20420Cancelled
YK
Yusuf Karim
Anwar Madinah
20 - 25 MarSAR 3 100
Vue
<UiBookingCard
  code="BK-20418"
  status="Confirmed"
  guest="Omar Hassan"
  hotel="Swissotel Makkah"
  dates="12 - 19 Mar"
  :amount="9800"
 />

<UiBookingCard
  code="BK-20419"
  status="Pending"
  guest="Aisha Rahman"
  hotel="Dar Al Iman"
  dates="14 - 18 Mar"
  :amount="4200"
 />

<UiBookingCard
  code="BK-20420"
  status="Cancelled"
  guest="Yusuf Karim"
  hotel="Anwar Madinah"
  dates="20 - 25 Mar"
  :amount="3100"
 />

Sizes

BK-20418Confirmed
OH
Omar Hassan
Swissotel Makkah
12 - 19 MarSAR 9 800
BK-20418Confirmed
OH
Omar Hassan
Swissotel Makkah
12 - 19 MarSAR 9 800
BK-20418Confirmed
OH
Omar Hassan
Swissotel Makkah
12 - 19 MarSAR 9 800
BK-20418Confirmed
OH
Omar Hassan
Swissotel Makkah
12 - 19 MarSAR 9 800
BK-20418Confirmed
OH
Omar Hassan
Swissotel Makkah
12 - 19 MarSAR 9 800
Vue
<UiBookingCard
  code="BK-20418"
  status="Confirmed"
  guest="Omar Hassan"
  hotel="Swissotel Makkah"
  dates="12 - 19 Mar"
  :amount="9800"
  size="xs"
 />

<UiBookingCard
  code="BK-20418"
  status="Confirmed"
  guest="Omar Hassan"
  hotel="Swissotel Makkah"
  dates="12 - 19 Mar"
  :amount="9800"
  size="sm"
 />

<UiBookingCard
  code="BK-20418"
  status="Confirmed"
  guest="Omar Hassan"
  hotel="Swissotel Makkah"
  dates="12 - 19 Mar"
  :amount="9800"
  size="md"
 />

<UiBookingCard
  code="BK-20418"
  status="Confirmed"
  guest="Omar Hassan"
  hotel="Swissotel Makkah"
  dates="12 - 19 Mar"
  :amount="9800"
  size="lg"
 />

<UiBookingCard
  code="BK-20418"
  status="Confirmed"
  guest="Omar Hassan"
  hotel="Swissotel Makkah"
  dates="12 - 19 Mar"
  :amount="9800"
  size="xl"
 />

API reference

Compact booking summary: code, status, guest, hotel, dates and total.

Props

PropType and valuesDefaultDescription
coderequiredstring—Booking reference, monospaced.
statusConfirmedPendingCancelled—Status text. Confirmed is green, Pending amber, Cancelled red; any other value gets a neutral badge.
gueststring—Guest name, also drives the avatar initials.
hotelstring—Hotel name under the guest.
datesstring—Preformatted date range, e.g. "12-19 Mar".
amountnumber—Total, formatted as "SAR 1 200".
sizexssmmdlgxl'md'Scales padding, text and avatars.