Button Component System

Standard Variants

variant="default"

variant="destructive"

variant="outline"

variant="secondary"

variant="ghost"

variant="link"

Color Variants

variant="primary"

variant="success"

variant="warning"

variant="info"

variant="orange"

variant="green"

variant="white"

Outline Color Variants

variant="outline-white"

variant="outline-green"

variant="outline-o "react/"range"

variant="outline-blue"

Size Variants

size="sm"

size="default"

size="lg"

size="xl"

size="icon"

Rounded Variants

rounded="default"

rounded="md"

rounded="lg"

rounded="full"

Combined Examples

variant="primary" size="lg" rounded="lg"

variant="success" size="xl" rounded="full"

variant="outline-white" className="bg-green-800" size="lg"

variant="orange" size="lg" rounded="md"

Usage Guidelines

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>