Booking CTA

Pattern overview

Every Kuoni page that drives toward a sale uses a three-stage CTA hierarchy. The hierarchy maps to the user's level of intent:

1. Browse — scanning, comparing, low commitment → Ghost or outline button
2. Enquire — showing intent, requesting more detail → Primary yellow button
3. Book — committing, paying → Primary yellow button at maximum visual weight

This distinction matters because travel purchases are high-consideration: the average Kuoni customer views 8–12 holidays before enquiring and takes 3–7 days from first visit to booking. Premature commitment pressure increases bounce rates.

Funnel stage detail

Stage 1 — Browse

The browse CTA must not pressure users who are still comparing options.

• Button variant: Ghost (border + transparent bg) or Outline (border + white bg)
• Label: "View details" — describes the action, not the outcome
• Placement: bottom of TripCard, full-width within the card
• Price: from £3,299 pp — "from" prefix is mandatory at this stage

<Button variant="outline" size="sm">View details</Button>

A primary yellow button on a browse card signals urgency the user doesn't feel. It trains users to ignore yellow buttons across the site.

Stage 2 — Enquire

Once the user has opened a specific holiday and is reviewing it, the primary CTA appears.

• Button variant: Primary (Kuoni Yellow, dark text)
• Label: "Enquire now" — not "Book" — because no payment is taken at this step
• Placement: full-width at the bottom of the BookingCard side panel
• Price: full breakdown visible — per-person price + total price

A secondary action ("Call us" with phone icon) can appear below the primary button. It must always be lower visual weight — outlined or ghost.

<Button variant="primary">Enquire now</Button>
<Button variant="ghost" size="sm">
  <Phone className="mr-2 h-4 w-4" />
  Call us
</Button>

Stage 3 — Book

At checkout, the user has confirmed party size, dates, and total cost. The CTA reflects full commitment.

• Button variant: Primary (Kuoni Yellow) with shadow-kuoni-sm added
• Label: "Book now — secure your holiday" — more specific than "Enquire now", signals that this action creates a booking reference
• Placement: below the full price summary, full-width
• Price: total price as the primary figure, per-person as secondary

<Button variant="primary" className="shadow-kuoni-sm w-full">
  Book now — secure your holiday
</Button>

The copy "secure your holiday" reassures users that clicking does not mean immediate payment — Kuoni's typical flow takes a deposit or is payment-on-collection. This reduces abandonment at the final step.

Price display and CTA pairing

The price escalation rule

The price label format changes across funnel stages to match what the user needs at each point:

Never show total-only in browse. A £6,598 total looks expensive against a competitor's £2,199 per-person price. Always show the per-person figure in the first touchpoint.

Always show total at book. At checkout, the user is authorising a total spend. Per-person-only at this stage causes confusion about the actual amount being committed.

PriceDisplay component usage

{/* Browse stage */}
<PriceDisplay amount={3299} prefix="from" suffix="pp" />

{/* Enquire stage */}
<PriceDisplay amount={3299} suffix="pp" />
<PriceDisplay amount={6598} prefix="Total:" size="sm" />

{/* Book stage */}
<PriceDisplay amount={6598} size="lg" />
<PriceDisplay amount={3299} prefix="£" suffix="pp" size="sm" muted />

Button placement rules

One primary CTA per view

There is never more than one primary (yellow) button visible on screen at the same time. The BookingCard side panel contains the primary "Enquire now" — this means the browse grid cards behind it must use ghost/outline CTAs.

CTA stacking order

When multiple actions are available, stack them in this order (top to bottom):

1. Primary — the recommended action for this funnel stage
2. Secondary — an alternative route ("Call us", "Add to wishlist")
3. Tertiary — a navigation escape ("Back to results", "View similar holidays")

Never reverse this order. Never show two primary buttons in a stack.

Full-width vs auto-width

Usage

Worked example — holiday detail page

A holiday detail page holds all three funnel stages simultaneously. The pattern resolves the conflict:

1. Above the fold — hero image, title, star rating. No CTA yet.
2. Key facts section — nights, dates, board basis, departure airports. Ghost "Check availability" button.
3. BookingCard (sticky side panel) — full price breakdown, party selector (CounterInput), and primary "Enquire now" button. This is the only primary CTA on the page.
4. Similar holidays — TripCards at the bottom of the page use outline "View details" — never primary.

This means a user scrolling the page sees: no CTA → ghost CTA → primary CTA (in the sticky panel). The escalation is natural.

Components used

Accessibility

Button labels must include the holiday name for screen readers

Generic labels like "View details" and "Book now" repeat across multiple cards on the same page. Screen reader users navigating by buttons hear "View details, View details, View details" without context.

Add an aria-label that includes the holiday name:

<Button
  variant="outline"
  aria-label={`View details — ${holiday.name}`}
>
  View details
</Button>

Price changes must be announced

When the total price updates (e.g. the user changes party size in CounterInput), announce the new total:

<p aria-live="polite" aria-atomic="true">
  Total: £6,598 for 2 adults
</p>

Focus management at stage transitions

When the user moves from browse → enquire (e.g. clicks "View details" and the BookingCard panel opens), move focus to the panel heading. This ensures keyboard users are not left at the card CTA while the panel is open off-screen.