CTAButton
Call-to-action button component optimized for conversions with built-in analytics tracking and external link handling. Wraps the standard Button component with link behavior and automatic click tracking.
Live Preview
Variants
Button Variants
Different visual styles for various contexts and hierarchies
Size Variations
Three size options to match different contexts
With Icons
CTAs with Icons
Add icons before or after button text for visual emphasis
External Links
Open links in new tabs with the external prop
Tracking
With Analytics Tracking
Track button clicks with custom metadata for analytics
Real World
Hero Section CTAs
Primary and secondary CTAs in a hero section
Ready to get started?
Join thousands of developers building with Launch77
Pricing Card CTAs
CTAs in pricing cards with consistent styling
Usage Guidance
✓ When to Use
Use for primary conversion actions on marketing pages (signup, demo requests, purchases, downloads). Ideal for hero CTAs, pricing page actions, and any button that drives business goals.
✗ When NOT to Use
Don't use for internal navigation (use Next.js Link or Button), regular UI actions within the app (use Button instead), or non-conversion actions like "Learn More" links (use regular links).
Props
hrefexternaltrackingDataonClickclassNamestylechildrenonChange