This Button component is a core part of the design system—built to be flexible, accessible, and easy to use. It keeps designs consistent and works seamlessly across different parts of an app, making it a reliable choice for any interface.
This component is powered by TypeScript for stability and maintainability, with Tailwind CSS making customization and responsiveness easy. Designed to work seamlessly with React, it follows best practices for performance, reusability, and accessibility.
1<Button variant="primary" size="md">Primary</Button>
2<Button variant="secondary" size="md">Secondary</Button>
3<Button variant="outline" size="md">Outline</Button>
4<Button variant="ghost" size="md">Ghost</Button>
5<Button variant="success" size="md" icon={<FaCheck />} iconPosition="left">Success</Button>
6<Button variant="danger" size="md" icon={<FaExclamationTriangle />} iconPosition="left">Danger</Button>
7<Button variant="primary" isLoading>Loading...</Button>