Button Component
A versatile button component with various styles, sizes, and states.
Installation
pnpm → pnpm dlx pacmanui add button
npm → npx pacmanui add buttonUsage
import { Button } from '@/components/pacmanui/button'
export default function MyComponent() {
return (
<Button>Click me</Button>
)
}API Reference
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'primary' | The visual style of the button |
| size | 'sm' | 'md' | 'lg' | 'md' | The size of the button |
| state | 'default' | 'loading' | 'success' | 'error' | 'warning' | 'disabled' | 'default' | The current state of the button |
| fullWidth | boolean | false | Whether the button should take up the full width of its container |
| icon | React.ReactNode | undefined | Optional icon to display before the button text |
| className | string | '' | Additional CSS classes to apply to the button |
| onClick | (event: React.MouseEvent) => void | undefined | Function called when the button is clicked |
| disabled | boolean | false | Whether the button is disabled |
| type | 'button' | 'submit' | 'reset' | 'button' | The type of button |
Examples
Button Variants
Different button variants available
import { Button } from '@/components/pacmanui/button'
// Different variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>Button Sizes
Buttons in different sizes
import { Button } from '@/components/pacmanui/button'
// Different sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>Button States
Different button states including loading, success, error, and warning
import { Button } from '@/components/pacmanui/button'
// Different states
<Button state="default">Default</Button>
<Button state="loading">Loading</Button>
<Button state="success">Success</Button>
<Button state="error">Error</Button>
<Button state="warning">Warning</Button>
<Button state="disabled">Disabled</Button>