Book Call

A simple call-to-action button for booking meetings with a subtle hover animation.

import { BookCall } from "@/components/omm/book-call";
 
export function BookCallDemo() {
  return (
    <BookCall
      meetingLink="https://cal.com/your-username/15min"
      profileImage="https://assets.ommishra.me/images/om-avatar.jpg"
      text="Book a Call"
    />
  );
}

Features

Clean, minimal button design for booking calls or meetings.
Smooth hover animation revealing a "You" badge with a plus icon.
Customizable profile image, button text, and meeting link.
Theme-aware styling using primary colors.

Installation

pnpm dlx shadcn add @omm/book-call

Usage

import { BookCall } from "@/components/omm/book-call";

<BookCall
  meetingLink="https://cal.com/your-username/15min"
  profileImage="/your-profile.jpg"
  text="Book a Call"
/>

Props

Prop	Type	Default	Description
`meetingLink`	`string`	Required	URL to the meeting/booking link
`profileImage`	`string`	Required	URL or path to the profile image
`text`	`string`	`"Book a Call"`	Text to display on the button
`profileAlt`	`string`	`"You"`	Alt text shown in the hover badge
`className`	`string`	-	Additional class names

Examples

Custom Text

You

Schedule a Meeting

import { BookCall } from "@/components/omm/book-call";
 
export function BookCallDemo02() {
  return (
    <BookCall
      meetingLink="https://cal.com/your-username/30min"
      profileImage="https://assets.ommishra.me/images/om-avatar.jpg"
      text="Schedule a Meeting"
      profileAlt="You"
    />
  );
}