Button Components

LaunchKit includes a comprehensive set of specialized button components designed for specific actions and integrations.

Button Components (`/components/buttons`)

ButtonAccount.tsx

User account dropdown menu with profile actions.

Features:

User profile display
Quick navigation to settings
Sign out functionality
Admin panel access (if admin)

Usage:

import ButtonAccount from '@/components/buttons/ButtonAccount';

<ButtonAccount user={user} profile={profile} />

ButtonCheckout.tsx

Stripe checkout integration button.

Features:

Stripe session creation
Loading states during checkout
Error handling
Success callback

Usage:

import ButtonCheckout from '@/components/buttons/ButtonCheckout';

<ButtonCheckout
  priceId="price_1234567890"
  productName="LaunchKit Pro"
  onSuccess={() => {
    // Handle successful purchase
    router.push('/dashboard');
  }}
>
  Purchase Now - $99
</ButtonCheckout>

ButtonGradient.tsx

Stylized gradient button for CTAs.

Features:

Animated gradient backgrounds
Hover effects
Multiple color schemes
Icon support

Usage:

import ButtonGradient from '@/components/buttons/ButtonGradient';

<ButtonGradient
  variant="primary"
  size="lg"
  icon={<RocketIcon />}
  onClick={handleGetStarted}
>
  Get Started Today
</ButtonGradient>

ButtonLead.tsx

Lead capture button with form integration.

Features:

Email collection
Database insertion
Duplicate prevention
Success/error feedback

Usage:

import ButtonLead from '@/components/buttons/ButtonLead';

<ButtonLead
  placeholder="Enter your email"
  buttonText="Get Early Access"
  onSuccess={(email) => {
    // Lead captured successfully
    showThankYouMessage();
  }}
/>

ButtonPopover.tsx

Button that triggers a popover with content.

Features:

Customizable trigger button
Positioned popover content
Click outside to close
Keyboard navigation

ButtonSignin.tsx

Authentication sign-in button with OAuth options.

Features:

Multiple auth providers
Loading states
Error handling
Redirect after success

ButtonSupport.tsx

Customer support integration button.

Features:

Crisp chat integration
Email support fallback
Context-aware support
User information prefill

Button Components