Button - Copy this React, Tailwind Component to your project
Create a reusable Button component using React and TypeScript. The component should adhere to the following design tokens and specifications: Colors: Primary: #1D4ED8, Secondary: #6B7280, Disabled: #D1D5DB, Hover: #2563EB. Sizes: Small: 32px height, 12px padding, Medium: 40px height, 16px padding, Large: 48px height, 20px padding. Typography: Font family: Inter, Font weight: 600, Font size: 16px. States: Default, Hover, Focus, and Disabled with clear visual distinctions. Behavior: Accept onClick as a prop and handle button interactions. Scalability: Allow additional styles via a className prop. Accessibility: Use aria label for accessibility. Ensure the component is modular, includes appropriate type definitions, and supports customization through props like variant (e.g., primary, secondary)."
