Booking Card
Compact card display for a booking
SaaSBooking
Overview
BookingCard displays a booking summary in a compact card format suitable for lists and grids. It shows the booking title, status badge, date/time information, and optional action buttons. Supports loading, selected, and interactive states.
Usage
import { BookingCard } from "@leanicon/web-builder-library/saas";
<BookingCard
booking={{
id: "1",
title: "Team Standup",
status: "confirmed",
startTime: new Date("2026-03-25T09:00:00").toISOString(),
endTime: new Date("2026-03-25T09:30:00").toISOString(),
attendeeCount: 5,
isRecurring: false,
}}
onClick={(b) => console.log("Selected:", b.id)}
/>;Variants
Default
Team Meeting
Wed, Mar 25 • 10:00 AM - 11:00 AM
Conference Room A
5
Confirmed
Pending
Team Meeting
Wed, Mar 25 • 10:00 AM - 11:00 AM
Conference Room A
5
Pending
Completed
Team Meeting
Wed, Mar 25 • 10:00 AM - 11:00 AM
Conference Room A
5
Completed
Cancelled
Team Meeting
Wed, Mar 25 • 10:00 AM - 11:00 AM
Conference Room A
5
Cancelled
No Show
Team Meeting
Wed, Mar 25 • 10:00 AM - 11:00 AM
Conference Room A
5
No Show
Recurring
Weekly Standup
Wed, Mar 25 • 9:00 AM - 9:30 AM
Conference Room A
5Recurring
Confirmed
Many Attendees
All-Hands Meeting
Wed, Mar 25 • 2:00 PM - 3:00 PM
Conference Room A
25
Confirmed
Loading
Clickable
Team Meeting
Wed, Mar 25 • 10:00 AM - 11:00 AM
Conference Room A
5
Confirmed
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
booking | BookingSummary | — | Yes | Booking summary data |
loading | boolean | false | No | Whether card is in loading state |
selected | boolean | false | No | Whether card is selected |
showActions | boolean | true | No | Whether to show action buttons |
className | string | — | No | Custom class name |
onClick | ((booking: BookingSummary) => void) | — | No | Called when card is clicked |
onViewDetails | ((booking: BookingSummary) => void) | — | No | Called when view details is clicked |