menu_book

Quick Reference

Comprehensive component library and design tokens for consistent UI development

Buttons
All button variants with consistent styling and behavior

Variants

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
// Selection state for booking forms - uses design tokens
<Button variant="outline" className="border-primary bg-accent text-primary hover:bg-accent/80">Selected</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
// Custom large size for booking overlays
<Button className="py-6 px-8 ds-body-subtitle font-medium">Extra Large</Button>

Floating Action Button

// Floating Action Button - uses design tokens
<button className="bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg hover:shadow-xl w-14 h-14 rounded-full flex items-center justify-center transition-all duration-300 fixed bottom-6 right-6 z-50">
  <MaterialIcon name="add" className="h-5 w-5" />
</button>
Form Elements
Input fields, selects, and form controls
<Input placeholder="Enter text..." />
<Textarea placeholder="Enter longer text..." />
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Choose option..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
  </SelectContent>
</Select>
Feedback & Status
Alerts, badges, and status indicators
DefaultSecondaryOutlineDestructive
<Alert>
  <MaterialIcon name="info" size={16} />
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>Alert message</AlertDescription>
</Alert>
<Badge>Default</Badge>
<Progress value={65} />
Layout & Structure
Cards, separators, and layout components
Sample Card
Card description text

Card content goes here with proper spacing and typography.

JD

John Doe

john@example.com

Content after separator

<Card>
  <CardHeader>
    <CardTitle>Sample Card</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    Card content goes here
  </CardContent>
</Card>