@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

npm install @rpl/button

Usage

Basic Usage

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

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

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

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:

: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.