Advanced React Button

A customizable, expandable, and highly usable button library for React.

Features

• ✨ Hover Expansion - Buttons with icons expand to show text on hover
• 🎨 Full Customization - Sizes, variants, colors, and icon positioning
• 📱 Responsive - Adaptive design for various devices
• ♿ Accessible - ARIA support and high contrast
• 🔄 Loading State - Integrated spinner with optional text
• 🛠️ Easy to Use - Simple and intuitive API

Basic Usage

import React from 'react';
import { Button } from 'dynamix-button';
import { Heart } from 'lucide-react'; // or any icon library

function App() {
  return (
    <div>
      {/* Basic button */}
      <Button onClick={() => alert('Clicked!')}>
        Click here
      </Button>
      
      {/* Button with icon - expands on hover */}
      <Button icon={<Heart />}>
        Favorite
      </Button>
    </div>
  );
}

API

Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Button content (text) | | icon | ReactNode | - | Icon to be displayed on the button | | onClick | () => void | - | Function called on button click | | size | 'sm' | 'md' | 'lg' | 'md' | Button size | | variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'primary' | Button style | | iconPosition | 'left' | 'right' | 'left' | Icon positioning | | alwaysShowText | boolean | false | Always show text | | fullWidth | boolean | false | Whether the button should be full width | | disabled | boolean | false | Whether the button is disabled | | loading | boolean | false | Whether the button is in loading state | | loadingText | string | - | Text to display while loading | | title | string | - | Title attribute for tooltip and accessibility | | ariaLabel | string | - | ARIA label for accessibility | | backgroundColor | string | - | Custom background color | | hoverBackgroundColor | string | - | Background color on hover | | activeBackgroundColor | string | - | Background color on click | | textColor | string | - | Text color | | borderColor | string | - | Border color |

Advanced Examples

Different Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

Different Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Button with Icon (Hover Expansion)

import { Send } from 'lucide-react';

// Icon on the left (default)
<Button icon={<Send />}>Send</Button>

// Icon on the right
<Button icon={<Send />} iconPosition="right">Send</Button>

Loading State

// Loading button with text
<Button loading loadingText="Sending...">Send</Button>

// Loading button without text
<Button loading>Send</Button>

Custom Colors

// Fully customized color button
<Button 
  backgroundColor="#3498db"
  hoverBackgroundColor="#2980b9"
  activeBackgroundColor="#1c6ca1"
  textColor="#ffffff"
  borderColor="#2980b9"
>
  Blue Button
</Button>

// Outline button with custom color
<Button 
  variant="outline"
  textColor="#9b59b6"
  borderColor="#9b59b6"
  hoverBackgroundColor="rgba(155, 89, 182, 0.1)"
>
  Purple Option
</Button>

Full Width Button

<Button fullWidth>Full Width Button</Button>

Disabled Button

<Button disabled>Disabled Button</Button>

Accessibility

<Button 
  ariaLabel="Button to submit form"
  title="Click to submit the form"
>
  Submit
</Button>

Expansion Behavior

One of the main features of this component is its expansion behavior on hover. When a button has an icon:

1. Initially, only the icon is visible
2. On hover, the button smoothly expands to show the text
3. On mouse out, it collapses back to icon state

This behavior is ideal for interfaces with limited space, such as sidebars, toolbars, or compact menus.

import { Heart, Send, Settings, User } from 'lucide-react';

// Toolbar with expandable buttons
<div style={{ display: 'flex', gap: '8px' }}>
  <Button icon={<Heart />}>Favorite</Button>
  <Button icon={<Send />}>Send</Button>
  <Button icon={<Settings />}>Settings</Button>
  <Button icon={<User />}>Profile</Button>
</div>

Usage with Icon Libraries

The component is designed to work well with popular icon libraries:

Lucide React

import { Download } from 'lucide-react';

<Button icon={<Download />}>Download</Button>

React Icons

import { FiDownload } from 'react-icons/fi';

<Button icon={<FiDownload />}>Download</Button>

Material UI Icons

import DownloadIcon from '@mui/icons-material/Download';

<Button icon={<DownloadIcon />}>Download</Button>

Style Customization

The component automatically resizes icons according to the button size, ensuring a consistent and proportional appearance.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

License

MIT © [ramonexe]