@pagedotapp/page-button

@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