Button Component System

General Button Usage

• Use variant="primary" for main call-to-action buttons
• Use variant="outline" for secondary actions
• Use size="lg" for important buttons, size="default" for standard buttons
• Use rounded="lg" or rounded="full" for a more modern look

Color Guidelines

• Use variant="primary" (blue) for main actions
• Use variant="success" (green) for positive actions or confirmations
• Use variant="warning" (amber) for actions that require attention
• Use variant="destructive" (red) for delete or dangerous actions
• Use variant="orange" for CTAs related to services
• Use variant="white" for buttons on dark backgrounds

Implementation Example

<Link href="/contact" passHref>
  <Button 
    variant="orange" 
    size="lg" 
    rounded="md"
  >
    Contact Us Now
  </Button>
</Link>