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

PropTypeDefaultDescription
bgstring'#ffffff'Background color of the button
textColorstring'#000000'Text color of the button
borderColorstring'#000000'Border color of the button
shadowstring'#000000'Shadow color of the button
onClickfunctionundefinedFunction to call when the button is clicked
classNamestring''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
<Button
bg="#fefcd0"
textColor="black"
borderColor="black"
shadow="#c381b5"
>
Themed Button
</Button>

Additional Examples

With onClick Handler

<Button
className="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: