Buttons

Fast Forward Dev includes several button components for different purposes.

Button Components

CTAButton

Main call-to-action button with Stripe integration.

Location: src/components/Button/CTAButton.tsx

Usage:


import CTAButton from '@/components/Button/CTAButton'
import { ProductType } from '@/config/config'
 
<CTAButton
  buttonText="Get Started"
  buttonLogo={<Icon />}
  buttonLogoRight={false}
  buttonMaxWidth={true}
  productType={ProductType.PRO}
/>

PricingCTAButton

Simplified CTA button that uses configuration from /components/CTA/CTA.tsx.

Location: src/components/Button/PricingCTAButton.tsx

Usage:


import PricingCTAButton from '@/components/Button/PricingCTAButton'
 
<PricingCTAButton />

BackButton

Navigation button to go back to previous page.

Location: src/components/Button/BackButton.tsx

Usage:


import BackButton from '@/components/Button/BackButton'
 
<BackButton />

LogoButton

Button with site logo/icon.

Location: src/components/Button/LogoButton.tsx

CTA Configuration

Configure default CTA button settings in /components/CTA/CTA.tsx:

CTA.tsx


export const buttonText = 'Get Started'
export const buttonLogo = <FaRocket />
export const buttonLogoRight = false

DaisyUI Button Styles

Use DaisyUI button classes:


<button className="btn btn-primary">Primary</button>
<button className="btn btn-secondary">Secondary</button>
<button className="btn btn-accent">Accent</button>
<button className="btn btn-ghost">Ghost</button>
<button className="btn btn-link">Link</button>

Button Sizes


<button className="btn btn-lg">Large</button>
<button className="btn">Normal</button>
<button className="btn btn-sm">Small</button>
<button className="btn btn-xs">Extra Small</button>

Button States


<button className="btn btn-active">Active</button>
<button className="btn btn-disabled">Disabled</button>
<button className="btn loading">Loading</button>

Next Steps

Pricing Component - Use buttons in pricing
Hero Component - Add CTA to hero