Button
A customizable, pixel-art styled button component.
Basic Usage
import { Button } from 'pixel-retroui';function App() {return (<Button onClick={() => console.log('Clicked!')}>Click me!</Button>);}
Props
Prop | Type | Default | Description |
---|---|---|---|
bg | string | '#ffffff' | Background color of the button |
textColor | string | '#000000' | Text color of the button |
borderColor | string | '#000000' | Border color of the button |
shadow | string | '#000000' | Shadow color of the button |
onClick | function | undefined | Function to call when the button is clicked |
className | string | '' | Additional CSS classes to apply to the button |
Custom Button
Customize your button's appearance by selecting a preset theme or creating your own color scheme.
Theme: pop
pop
<Buttonbg="#fefcd0"textColor="black"borderColor="black"shadow="#c381b5">Themed Button</Button>
Additional Examples
With onClick Handler
<ButtonclassName="w-20 h-10"onClick={() => alert('Button clicked!')}>Alert!</Button>
Preview:
With Additional Classes
<Button bg="darkgray" shadow="gray" className="w-full py-2">Full Width Button</Button>
Preview: