Amazing React Buttons

A performant, extendable, highly customizable, production-ready React component library that renders an animated set of UI buttons.

🚀 Features

• ✅ Multiple Button Types - Primary, secondary, link, anchor, danger
• ✅ Different Sizes - Small, medium, large
• ✅ Icon Support - Before and after text icons
• ✅ Ripple Effects - Material design-inspired ripple animations
• ✅ Progress Buttons - Async operations with progress indicators
• ✅ Social Buttons - Pre-configured social media sharing buttons
• ✅ Custom Styling - Inline styles and CSS classes
• ✅ TypeScript Support - Full TypeScript definitions
• ✅ Accessibility - ARIA attributes and keyboard navigation
• ✅ React 18.3.1 - Modern React compatibility

📦 Installation

npm install amazing-react-buttons

🎯 Quick Start

import React from 'react';
import AwesomeButton from 'amazing-react-buttons';
import 'amazing-react-buttons/dist/styles.css';

function App() {
  return (
    <AwesomeButton type="primary" onPress={() => alert('Clicked!')}>
      Click Me!
    </AwesomeButton>
  );
}

🎨 Examples

Basic Buttons

<AwesomeButton type="primary">Primary</AwesomeButton>
<AwesomeButton type="secondary">Secondary</AwesomeButton>
<AwesomeButton type="link">Link</AwesomeButton>
<AwesomeButton disabled>Disabled</AwesomeButton>

Different Sizes

<AwesomeButton size="small">Small</AwesomeButton>
<AwesomeButton size="medium">Medium</AwesomeButton>
<AwesomeButton size="large">Large</AwesomeButton>

With Icons

<AwesomeButton before="🚀">Launch</AwesomeButton>
<AwesomeButton after="⭐">Star</AwesomeButton>
<AwesomeButton before="📧" after="→">Email</AwesomeButton>

Ripple Effect

<AwesomeButton ripple>Click for Ripple</AwesomeButton>

Progress Button

<AwesomeButtonProgress
  onPress={(event, next) => {
    setTimeout(next, 2000);
  }}
>
  Start Progress
</AwesomeButtonProgress>

Social Buttons

<AwesomeButtonSocial type="facebook" href="https://facebook.com">
  Share on Facebook
</AwesomeButtonSocial>

<AwesomeButtonSocial type="twitter" href="https://twitter.com">
  Share on Twitter
</AwesomeButtonSocial>

📚 Documentation

• Usage Guide - Comprehensive usage guide
• Example Usage - Quick start examples
• Integration Options - How to use in other projects

🔧 Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# Run tests
npm test

📋 Requirements

• React >= 16.8.0
• React DOM >= 16.8.0

🎉 License

MIT License - feel free to use in your projects!

Built with ❤️ using React 18.3.1 and TypeScript