@centrodphlibs/button-css-modules

React button component library using CSS modules for scoped styling. Provides variants and sizes with traditional CSS module approach.

Installation

npm install @centrodphlibs/button-css-modules

Usage

Import the component and manually import the CSS file:

import { Button } from '@centrodphlibs/button-css-modules';
import '@centrodphlibs/button-css-modules/style.css'; // Required!

function App() {
  return (
    <div>
      <Button variant="primary" size="medium" onClick={() => alert('Clicked!')}>
        Primary Button
      </Button>
      <Button variant="secondary" size="large">
        Secondary Button
      </Button>
      <Button variant="outline" size="small">
        Outline Button
      </Button>
      <Button variant="ghost" disabled>
        Ghost Button (Disabled)
      </Button>
    </div>
  );
}

Props

ButtonProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'outline' \| 'ghost' | 'primary' | Button style variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | disabled | boolean | false | Whether the button is disabled | | onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | - | Click handler | | children | React.ReactNode | - | Button content (required) | | className | string | - | Additional CSS class name |

Variants

• primary: Solid blue background with white text
• secondary: Solid gray background with white text
• outline: Transparent background with blue border and text
• ghost: Transparent background with blue text, no border

Sizes

• small: Compact padding (6px 12px), 14px font
• medium: Default padding (10px 20px), 16px font
• large: Larger padding (14px 28px), 18px font

Running unit tests

Run nx test button-css-modules to execute the unit tests via Vitest.