@pagedotapp/page-button

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

Installation

npm install @pagedotapp/page-button

Usage

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:

<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