npm package: @pagedotapp/page-button
Description: A simple, reusable button component
Author: PageStudio
Latest version: 0.0.0-alpha.13

# @pagedotapp/page-button

A versatile button component with multiple variants, sizes, animations, and responsive design support.

## Installation

```bash
npm install @pagedotapp/page-button
```

## Usage

```tsx
import { PageButton } from "@pagedotapp/page-button"

function App() {
	return (
		<PageButton
			variant="primary"
			size="md"
			rounded="full"
			shadow="md"
			animation="scale"
			onClick={handleClick}
		>
			Click me
		</PageButton>
	)
}
```

## Props

| Prop          | Type                                                                                         | Default     | Description               |
| ------------- | -------------------------------------------------------------------------------------------- | ----------- | ------------------------- |
| `children`    | `ReactNode`                                                                                  | -           | Button content (required) |
| `variant`     | `ResponsiveValue<'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger' \| 'success'>` | `'primary'` | Visual style              |
| `size`        | `ResponsiveValue<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'>`                                      | `'md'`      | Button size               |
| `loading`     | `boolean`                                                                                    | `false`     | Show loading spinner      |
| `disabled`    | `boolean`                                                                                    | `false`     | Disable button            |
| `fullWidth`   | `ResponsiveValue<boolean>`                                                                   | `false`     | Make button full width    |
| `iconBefore`  | `ReactNode`                                                                                  | -           | Icon before text          |
| `iconAfter`   | `ReactNode`                                                                                  | -           | Icon after text           |
| `rounded`     | `ResponsiveValue<'none' \| 'sm' \| 'md' \| 'lg' \| 'full'>`                                  | `'md'`      | Border radius             |
| `shadow`      | `ResponsiveValue<'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'>`                                    | `'none'`    | Shadow effect             |
| `animation`   | `'none' \| 'pulse' \| 'bounce' \| 'scale'`                                                   | `'none'`    | Hover animation           |
| `loadingText` | `string`                                                                                     | -           | Custom loading text       |
| `className`   | `string`                                                                                     | -           | Additional CSS classes    |
| `style`       | `CSSProperties`                                                                              | -           | Inline styles             |

## Responsive Values

Many props support responsive values for adaptive designs:

```tsx
<PageButton
	size={{ base: "sm", md: "md", lg: "lg" }}
	fullWidth={{ base: true, md: false }}
	rounded={{ base: "md", lg: "full" }}
>
	Responsive Button
</PageButton>
```

## Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

## Dependencies

### Peer Dependencies

- React ^18.3.1
- React DOM ^18.3.1

## License

MIT © PageStudio