React Button

A customizable React Button component with various variants, sizes, and styling options.

Installation

npm install @kyawthihasoe/react-button
# or
yarn add @kyawthihasoe/react-button

Usage

import { Button } from '@kyawthihasoe/react-button';

function App() {
  return (
    <Button
      variant="primary"
      size="medium"
      onClick={() => console.log('Button clicked!')}
    >
      Click me
    </Button>
  );
}

Features

• Multiple variants (primary, secondary, danger, success)
• Different size options (small, medium, large)
• Full width option
• TypeScript support
• Extends native button HTML attributes
• Customizable through CSS classes

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | variant | 'primary' | 'secondary' | 'danger' | 'success' | No | 'primary' | The visual style of the button | | size | 'small' | 'medium' | 'large' | No | 'medium' | Size of the button | | fullWidth | boolean | No | false | Whether the button should take full width of its container | | children | ReactNode | Yes | - | Content to be displayed in the button | | className | string | No | '' | Additional CSS classes to apply to the button |

The component also accepts all standard HTML button attributes (onClick, disabled, type, etc.).

Styling

The button comes with default styles but can be customized using CSS. The component uses the following CSS classes:

• common-button: Base button styles
• button-{variant}: Styles for each variant (e.g., button-primary, button-secondary)
• button-{size}: Styles for each size (e.g., button-small, button-medium)
• button-full-width: Applied when fullWidth prop is true

License

MIT