Package Exports

pure-react-ui
pure-react-ui/dist/index.esm.js
pure-react-ui/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pure-react-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Advanced Professional Button Component

A modern, fully-featured React button component with TypeScript support, multiple variants, sizes, and advanced features like ripple effects, loading states, and elevation shadows.

Features

✨ Multiple Variants: Solid, Outline, Ghost, and Gradient styles
🎨 6 Color Schemes: Primary, Secondary, Success, Danger, Warning, Info
📏 5 Size Options: Extra Small, Small, Medium, Large, Extra Large
🎭 Advanced Effects: Ripple animation, Elevation shadows, Smooth transitions
♿ Accessible: ARIA attributes, Keyboard navigation, Focus states
🔄 Loading States: Built-in spinner with disabled interaction
🎯 Icon Support: Left and right icon positioning
📱 Responsive: Mobile-friendly with adaptive sizing
⚡ TypeScript: Full type safety and IntelliSense support
🎪 2px Border Radius: Sharp, professional appearance

Installation

# Copy these files to your project:
# - Button.tsx
# - Button.css

Basic Usage

import { Button } from './components/Button';
import './components/Button.css';

function App() {
  return (
    <Button variant="primary" size="medium">
      Click Me
    </Button>
  );
}

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	Button content (required)
`variant`	`string`	`'primary'`	Button style variant
`size`	`'xs' \| 'small' \| 'medium' \| 'large' \| 'xl'`	`'medium'`	Button size
`loading`	`boolean`	`false`	Show loading spinner
`disabled`	`boolean`	`false`	Disable button interaction
`iconLeft`	`ReactNode`	-	Icon before text
`iconRight`	`ReactNode`	-	Icon after text
`fullWidth`	`boolean`	`false`	Make button full width
`rounded`	`boolean`	`false`	Use pill-shaped border radius
`elevation`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'none'`	Shadow elevation level
`ripple`	`boolean`	`true`	Enable ripple effect on click
`className`	`string`	`''`	Additional CSS classes
`onClick`	`function`	-	Click handler

Plus all standard HTML button attributes.

Variants

Solid Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="info">Info</Button>

Outline Variants

<Button variant="outline-primary">Primary</Button>
<Button variant="outline-secondary">Secondary</Button>
<Button variant="outline-success">Success</Button>
<Button variant="outline-danger">Danger</Button>
<Button variant="outline-warning">Warning</Button>
<Button variant="outline-info">Info</Button>

Ghost Variants

<Button variant="ghost-primary">Primary</Button>
<Button variant="ghost-secondary">Secondary</Button>
<Button variant="ghost-success">Success</Button>
<Button variant="ghost-danger">Danger</Button>
<Button variant="ghost-warning">Warning</Button>
<Button variant="ghost-info">Info</Button>

Gradient Variants

<Button variant="gradient-primary">Gradient Primary</Button>
<Button variant="gradient-success">Gradient Success</Button>
<Button variant="gradient-danger">Gradient Danger</Button>

Examples

With Icons

import { Download, Check, Search } from 'lucide-react';

<Button variant="primary" iconLeft={<Download />}>
  Download
</Button>

<Button variant="success" iconRight={<Check />}>
  Confirm
</Button>

<Button variant="outline-primary" iconLeft={<Search />}>
  Search
</Button>

Loading State

const [loading, setLoading] = useState(false);

const handleSubmit = async () => {
  setLoading(true);
  await someAsyncOperation();
  setLoading(false);
};

<Button 
  variant="primary" 
  loading={loading}
  onClick={handleSubmit}
>
  {loading ? 'Processing...' : 'Submit'}
</Button>

Different Sizes

<Button size="xs">Extra Small</Button>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<Button size="xl">Extra Large</Button>

With Elevation

<Button variant="primary" elevation="sm">Small Shadow</Button>
<Button variant="primary" elevation="md">Medium Shadow</Button>
<Button variant="primary" elevation="lg">Large Shadow</Button>

Rounded Buttons

<Button variant="primary" rounded>
  Rounded Button
</Button>

<Button variant="outline-success" rounded elevation="md">
  Rounded with Shadow
</Button>

Full Width

<Button variant="gradient-primary" fullWidth size="large">
  Full Width Button
</Button>

Disabled State

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

Advanced Combinations

<Button 
  variant="gradient-primary"
  size="large"
  rounded
  elevation="lg"
  iconLeft={<Download />}
>
  Premium Action
</Button>

<Button 
  variant="outline-success"
  size="large"
  rounded
  iconRight={<Check />}
  onClick={handleConfirm}
>
  Confirm Choice
</Button>

Styling Customization

Override Styles

You can override default styles by targeting CSS classes:

/* Custom primary color */
.pru-btn-primary {
  background-color: #your-color;
}

.pru-btn-primary:hover:not(:disabled) {
  background-color: #your-hover-color;
}

/* Custom size */
.pru-btn-custom {
  padding: 12px 24px;
  font-size: 15px;
}

/* Custom border radius */
.pru-btn {
  border-radius: 4px; /* Override default 2px */
}

Additional Classes

<Button 
  variant="primary" 
  className="my-custom-class"
>
  Custom Button
</Button>

Accessibility

The button component includes:

✅ Proper ARIA attributes (aria-disabled, aria-busy)
✅ Keyboard navigation support
✅ Focus visible states
✅ Screen reader friendly loading states
✅ Disabled state handling
✅ Semantic HTML button element

Best Practices

Use appropriate variants for different actions:
- primary for main actions
- secondary for secondary actions
- success for confirmations
- danger for destructive actions
- outline for less prominent actions
- ghost for tertiary actions
Choose the right size:
- xs for compact UIs
- small for inline actions
- medium for most use cases
- large for CTAs
- xl for hero sections
Loading states: Always show loading feedback for async operations
Icons: Use meaningful icons that enhance understanding
Elevation: Use shadows to create visual hierarchy

Browser Support

✅ Chrome (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Edge (latest)
✅ Mobile browsers

Performance

Lightweight CSS with efficient selectors
Optimized animations using transform and opacity
Minimal JavaScript overhead
No external dependencies (except React)

TypeScript Support

Full TypeScript support with:

Type-safe props
IntelliSense autocomplete
Type checking for variants and sizes
Proper event typing

License

MIT License - Feel free to use in your projects!

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

Credits

Created with ❤️ for professional React applications.

Version: 1.0.0
Last Updated: 2024