Brand Guidelines

Buttons

Button components with all variants

Variants

Primary

className="bg-primary text-primary-foreground hover:bg-[#19653A] dark:hover:bg-[#32BF79]"

Secondary

className="bg-secondary text-secondary-foreground hover:bg-[#9A4A2F] dark:hover:bg-[#C06A42]"

Accent

className="bg-accent text-accent-foreground hover:bg-accent/90"

Outline

className="border-2 border-primary text-primary hover:bg-primary/10"

Ghost

className="bg-muted text-foreground hover:bg-muted/80"

Subtle

className="text-foreground hover:bg-muted/50"

Sizes

States

Disabled

Loading

With Icons

Usage Guidelines

DO:

  • Use primary buttons for main actions (e.g., "Add to Cart", "Checkout")
  • Use secondary for alternative actions
  • Use outline for less prominent actions
  • Always provide clear, action-oriented labels
  • Show loading state during async operations

DON'T:

  • Don't use multiple primary buttons on the same page
  • Don't disable buttons without clear feedback
  • Don't use vague labels like "Click here"
  • Don't mix button styles inconsistently