npm package: @revoui/button
Description: A collection of button components for the RevoUI library.
Latest version: 2.0.18

A collection of versatile and customizable button components for React and Next.js applications, part of the main Revo UI library.

---

## 📦 Installation

Install the package using npm:

```bash
npm install @revoui/button
```



## 🚀 Usage

### Basic Button Usage

```jsx
import { Button, CheckButton } from '@revoui/button';

export default function MyPage() {
  return (
    <div className="d-flex gap-4 p-8">
      {/* Standard Button */}
      <Button
        onClick={() => console.log('Button clicked!')}
        color="primary"
        size="lg"
        rounded="lg"
      >
        Click Me
      </Button>

      {/* Check Button */}
      <CheckButton
        onChange={(checked) => console.log('Checkbox toggled:', checked)}
        color="secondary"
        size="md"
        checked
      />
    </div>
  );
}
```

### Advanced Usage Examples

```jsx
import { Button, IconButton, ButtonGroup, ToggleButton, RadioButton } from '@revoui/button';
import { FaHeart, FaStar, FaUser } from 'react-icons/fa';

export default function Component() {
  return (
    <div className="p-6">
      {/* Button with outline */}
      <Button outline color="primary" size="md">
        Outline Button
      </Button>
      
      {/* Disabled button */}
      <Button disabled color="secondary">
        Disabled Button
      </Button>
      
      {/* Icon Button */}
      <IconButton 
        icon={<FaHeart />} 
        color="danger" 
        size="lg"
        onClick={() => console.log('Liked!')}
      />
      
      {/* Toggle Button */}
      <ToggleButton
        toggled={true}
        onToggle={(toggled) => console.log('Toggled:', toggled)}
        color="success"
      />
      
      {/* Radio Button */}
      <RadioButton
        selected={true}
        onSelect={() => console.log('Selected')}
        color="warning"
      />
      
      {/* Button group */}
      <ButtonGroup>
        <Button color="primary">First</Button>
        <Button color="primary">Second</Button>
        <Button color="primary">Third</Button>
      </ButtonGroup>
    </div>
  );
}
```

### Button Sizes and Colors

```jsx
import { Button } from '@revoui/button';

export default function SizeExamples() {
  return (
    <div className="d-flex gap-10">
      <Button size="sm" color="primary">Small Button</Button>
      <Button size="md" color="secondary">Medium Button</Button>
      <Button size="lg" color="success">Large Button</Button>
      <Button size="xl" color="danger">X-Large Button</Button>
    </div>
  );
}
```


## 🎨 Color Options

The button components support the following color options:

- `primary` - Main brand color
- `secondary` - Secondary accent color
- `success` - Green for success states
- `danger` - Red for error/danger states
- `warning` - Yellow/orange for warnings
- `info` - Blue for informational states
- `light` - Light background
- `dark` - Dark background
- `white` - Pure white
- `custom` - For custom styling via className

---

## 📏 Size Options

Available size options for all button components:

- `xs` - Extra small
- `sm` - Small
- `md` - Medium (default)
- `lg` - Large
- `xl` - Extra large

---

## 🔧 Customization

All components accept a `className` prop for custom styling:

```jsx
<Button className="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
  Gradient Button
</Button>
```

---

## 🧩 Components

| Component | Description |
|-----------|-------------|
| **Button** | Standard button component with various styling options |
| **IconButton** | Button designed to display an icon |
| **ToggleButton** | Button that toggles between states |
| **ButtonGroup** | Container for grouping multiple buttons together |
| **RadioButton** | Button that works as a radio input |
| **CheckButton** | Button that works as a checkbox input |

---

## ⚙️ Props

### Button Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | - | The content to be displayed inside the button |
| `onClick` | `function` | - | Event handler for button click events |
| `ripple` | `boolean` | `true` | Enables or disables the ripple effect on click |
| `rippleSize` | `number` | `5` | The size of the ripple effect |
| `rounded` | `string` | `"default"` | Sets the border-radius style |
| `className` | `string` | - | Custom CSS classes to apply |
| `color` | `string` | `"white"` | Sets the background color |
| `hover` | `string` | - | Sets the background color on hover |
| `size` | `string` | `"md"` | Defines the button size (sm, md, lg) |
| `textColor` | `string` | `"light"` | Sets the text color |
| `outline` | `boolean` | `false` | Applies an outline style to the button |
| `border` | `boolean` | `false` | Applies a border to the button |
| `disabled` | `boolean` | `false` | Disables the button and its click events |

### IconButton Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `icon` | `ReactNode` | - | Icon element to display |
| `onClick` | `function` | - | Event handler for button clicks |
| `size` | `string` | `"md"` | Defines the button size |
| `color` | `string` | `"primary"` | Sets the button color |
| `className` | `string` | - | Custom CSS classes to apply |
| `disabled` | `boolean` | `false` | Disables the button |

### ToggleButton Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `toggled` | `boolean` | `false` | Current toggle state |
| `onToggle` | `function` | - | Event handler for toggle events |
| `size` | `string` | `"md"` | Defines the button size |
| `color` | `string` | `"primary"` | Sets the button color |
| `className` | `string` | - | Custom CSS classes to apply |

### ButtonGroup Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | - | Button elements to group |
| `className` | `string` | - | Custom CSS classes to apply |
| `spacing` | `string` | `"8px"` | Space between buttons |
| `direction` | `string` | `"row"` | Layout direction (row/column) |

### RadioButton Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `selected` | `boolean` | `false` | Whether radio is selected |
| `onSelect` | `function` | - | Event handler for selection |
| `size` | `string` | `"md"` | Defines the button size |
| `color` | `string` | `"primary"` | Sets the button color |
| `className` | `string` | - | Custom CSS classes to apply |
| `disabled` | `boolean` | `false` | Disables the button |

### CheckButton Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `checked` | `boolean` | `false` | Checked state |
| `onChange` | `function` | - | Event handler for state changes |
| `size` | `string` | `"md"` | Defines the button size |
| `color` | `string` | `"primary"` | Sets the button color |
| `className` | `string` | - | Custom CSS classes to apply |
| `disabled` | `boolean` | `false` | Disables the button |

---

## 📄 License

This project is licensed under the MIT License. See the [LICENSE](https://github.com/revoui/button/blob/main/LICENSE) file for details.

---

## 👥 Author

- **Revoui Team**