Button #

A versatile button component with multiple variants and sizes, built with Class Variance Authority (CVA) for consistent styling.

Features #

• Multiple variants: Primary, secondary, outline, ghost, and destructive
• Three sizes: Small, medium, and large
• Accessibility: Focus states and disabled states
• TypeScript: Fully typed with proper prop interfaces
• CVA Integration: Dynamic styling with variant props

Variants #

Primary #

The default button style with blue background.

<Button variant="primary">Primary Button</Button>

Primary Button

Secondary #

A subtle button with surface background.

<Button variant="secondary">Secondary Button</Button>

Secondary Button

Outline #

A button with border and transparent background.

<Button variant="outline">Outline Button</Button>

Outline Button

Ghost #

A minimal button with no background.

<Button variant="ghost">Ghost Button</Button>

Destructive #

A button for destructive actions with red styling.

<Button variant="destructive">Delete</Button>

Sizes #

Small #

<Button size="sm">Small Button</Button>

Medium (Default) #

<Button size="md">Medium Button</Button>

Large #

<Button size="lg">Large Button</Button>

Props #

Prop	Type	Default	Description
children	React.ReactNode	-	Button content
variant	"primary" | "secondary" | "outline" | "ghost" | "destructive"	"primary"	Button style variant
size	"sm" | "md" | "lg"	"md"	Button size
onClick	() => void	-	Click handler
disabled	boolean	false	Disabled state
type	"button" | "submit" | "reset"	"button"	HTML button type
className	string	""	Additional CSS classes

Examples #

Form Submit Button #

<Button type="submit" variant="primary">
  Submit Form
</Button>

Disabled Button #

<Button disabled variant="secondary">
  Disabled Button
</Button>

Custom Styling #

<Button variant="outline" size="lg" className="w-full">
  Full Width Button
</Button>

Event Handling #

<Button variant="destructive" onClick={() => handleDelete()}>
  Delete Item
</Button>

Accessibility #

The Button component includes proper accessibility features:

• Focus states: Visible focus ring with focus-visible:ring-2
• Disabled states: Proper disabled styling and pointer events
• Keyboard navigation: Full keyboard support
• Screen readers: Proper semantic HTML button element

Styling #

The component uses Tailwind CSS with Catppuccin color palette:

• Primary: bg-ctp-blue with hover states
• Secondary: bg-ctp-surface1 with subtle hover effects
• Outline: Border with border-ctp-surface1
• Ghost: Transparent with hover background
• Destructive: bg-ctp-red for dangerous actions

CVA Configuration #

The button variants are defined using Class Variance Authority:

const buttonVariants = cva("base-styles", {
  variants: {
    variant: {
      /* variant styles */
    },
    size: {
      /* size styles */
    },
  },
  defaultVariants: {
    variant: "primary",
    size: "md",
  },
});

This ensures consistent styling and easy customization across the application.