QuickBuyBar

molecules

Sticky quick-buy bar at bottom of event page — event name, date, price from, and 'Buy Now' CTA. Appears on scroll past hero. Critical UX pattern: 3-click purchase flow.

ARIA Role: complementary

Demo

Demo for QuickBuyBar (molecules)

Sticky quick-buy bar at bottom of event page — event name, date, price from, and 'Buy Now' CTA. Appears on scroll past hero. Critical UX pattern: 3-click purchase flow.

Props

Prop	Type	Required	Default
`eventName`	`string`	Yes	`—`
`eventDate`	`string`	Yes	`—`
`priceFrom`	`number`	Yes	`—`
`currency`	`string`	No	`'USD'`
`onBuyNow`	`() => void`	Yes	`—`
`isLoading`	`boolean`	No	`False`

TypeScript Interface

interface QuickBuyBarProps {
  eventName: string;
  eventDate: string;
  priceFrom: number;
  currency: string;
  onBuyNow: () => void;
  isLoading?: boolean;
}

Assertions (NASA Rule 5)

[type]priceFrom must be positive number(NASA Rule 5)
[aria]Buy Now button must have aria-label with event name(WCAG 4.1.2)

Usage

Import

import { Quickbuybar } from '@epasslive/design-system'

Basic

<Quickbuybar />

With Variants

<Quickbuybar variant="primary" size="md" />