Code Generation
Ultimate React & Tailwind Reusable Button Architect
Generate a production-ready, accessible, and highly flexible React button component with multiple variants, sizes, and state handling using Tailwind CSS and TypeScript.
Prompt Preview
Act as a Senior Frontend Architect. Your task is to build a highly reusable, robust 'Button' component using React, TypeScript, and Tailwind CSS. Follow these strict requirements: 1) Styling Architecture: Use 'tailwind-merge' and 'clsx' (or 'class-variance-authority') to manage complex conditional classes efficiently. 2) Variants: Include styles for Primary, Secondary, Outline, Ghost, and Destructive. 3) Sizes: Support Sm, Md, Lg, and Icon-only versions. 4) Features: Implement a loading state with a customizable SVG spinner, disabled state handling, and support for left/right icons. 5) Polymorphism: Ensure the component can be rendered as a 'button' or an 'a' (anchor) tag using an 'asChild' pattern or an 'as' prop. 6) Accessibility: Include proper ARIA attributes, focus ring styles for keyboard navigation, and high-contrast considerations. 7) Code Quality: Provide clean, commented TypeScript interfaces for all props and ensure the component follows modern React best practices (React.forwardRef). Output the complete source code for 'Button.tsx' and include an example of how to implement it in a parent component.
- React Component
- Reusable
- Button