React button component library using Linaria
npm install @centrodphlibs/button-linariaReact button component library using Linaria for zero-runtime CSS-in-JS styling. Provides compile-time CSS extraction with variants and sizes.
``bash`
npm install @centrodphlibs/button-linaria
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 | - | 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.