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

<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: