npm package: @manikandan.palani/rpl-button
Description: RPL Design System Button Component - React button component with Figma design specifications
Author: RPL Team
Latest version: 1.0.0

# @rpl/button

A modern, accessible button component built with React and TypeScript, following Figma design specifications.

## Features

- 🎨 8 button variants (Primary, Secondary, Tertiary, Destructive variants, Link)
- 📏 4 size options (sm, md, lg, xl)
- ♿ Accessible with proper ARIA attributes
- 🔄 Loading states with spinners
- 🎯 Icon support (left or right positioning)
- 📱 Responsive design
- 🎨 CSS custom properties for easy theming

## Installation

```bash
npm install @rpl/button
```

## Usage

### Basic Usage

```jsx
import { Button } from '@rpl/button';

function App() {
  return (
    <div>
      <Button type="primary" size="md">
        Click me
      </Button>
      
      {/* Alternative using label prop for Figma compatibility */}
      <Button type="primary" size="md" label="Click me" />
    </div>
  );
}
```

### With Icons

```jsx
import { Button, PlusIcon, ChevronRightIcon } from '@rpl/button';

function App() {
  return (
    <div>
      <Button 
        type="primary" 
        size="md" 
        iconLeft={<PlusIcon />}
      >
        Add Item
      </Button>
      
      <Button 
        type="secondary" 
        size="md" 
        iconRight={<ChevronRightIcon />}
      >
        Continue
      </Button>
    </div>
  );
}
```

### Loading State

```jsx
import { Button } from '@rpl/button';

function App() {
  const [loading, setLoading] = useState(false);
  
  return (
    <Button 
      type="primary" 
      size="md" 
      loading={loading}
      onClick={() => setLoading(true)}
    >
      Submit
    </Button>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `'primary' \| 'primary-destructive' \| 'secondary' \| 'secondary-destructive' \| 'tertiary' \| 'tertiary-destructive' \| 'link' \| 'link-destructive'` | `'primary'` | Button variant style |
| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Button size |
| `children` | `ReactNode` | - | Button content (text or elements) |
| `label` | `string` | - | Alternative to children for Figma compatibility |
| `iconLeft` | `ReactNode` | - | Icon to display on the left side |
| `iconRight` | `ReactNode` | - | Icon to display on the right side |
| `loading` | `boolean` | `false` | Show loading spinner |
| `disabled` | `boolean` | `false` | Disable button interaction |
| `onClick` | `(event: MouseEvent) => void` | - | Click event handler |
| `className` | `string` | - | Additional CSS classes |
| `...props` | `ButtonHTMLAttributes<HTMLButtonElement>` | - | All standard button HTML attributes |

## Button Types

### Primary Buttons
- `primary` - Main call-to-action button (blue)
- `primary-destructive` - Critical actions (red)

### Secondary Buttons  
- `secondary` - Secondary actions with border
- `secondary-destructive` - Secondary critical actions

### Tertiary Buttons
- `tertiary` - Subtle actions without border
- `tertiary-destructive` - Subtle critical actions

### Link Buttons
- `link` - Text-only link style
- `link-destructive` - Text-only critical link style

## Available Icons

The package includes these commonly used icons:

- `ChevronRightIcon`
- `ChevronLeftIcon` 
- `PlusIcon`
- `CheckIcon`
- `DownloadIcon`
- `TrashIcon`
- `EditIcon`

```jsx
import { Button, PlusIcon, TrashIcon } from '@rpl/button';

<Button type="primary" iconLeft={<PlusIcon />}>Add</Button>
<Button type="tertiary-destructive" iconLeft={<TrashIcon />}>Delete</Button>
```

## Styling

The component uses CSS custom properties for easy theming. You can override these in your CSS:

```css
:root {
  --rpl-color-primary: #003e82;
  --rpl-color-destructive: #c80e11;
  --rpl-color-border: #d1d5db;
  --rpl-color-text: #1f2937;
  /* ... other custom properties */
}
```

## Browser Support

- Chrome (latest)
- Firefox (latest) 
- Safari (latest)
- Edge (latest)

## TypeScript

This package includes TypeScript definitions. No additional `@types` package needed.

## License

MIT

## Contributing

1. Fork the repository
2. Create your feature branch
3. Add tests for new features
4. Submit a pull request

## Support

For issues and questions, please open an issue on the repository.