@centrodphlibs/button-linaria

React button component library using Linaria for zero-runtime CSS-in-JS styling. Provides compile-time CSS extraction with variants and sizes.

Installation

``bash
npm install @centrodphlibs/button-linaria
`

Usage

Import the component and manually import the CSS file:

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

function App() {
return (



);
}
`

Props

$3

| 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) => 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-linaria` to execute the unit tests via Vitest.