Button

Overview

The Button component provides a pixel-art styled button with multiple variants, sizes, and built-in loading states.

Preview

Installation

See the Installation guide for setup instructions.

Usage

import { Button } from '@joacod/pixel-ui'

export default function Example() {
  return (
    <Button variant="primary" onClick={() => console.log('clicked')}>
      Click me
    </Button>
  )
}

Variants

The Button component supports multiple color variants:

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="error">Error</Button>
<Button variant="warning">Warning</Button>
<Button variant="accent">Accent</Button>

Sizes

Three size options are available:

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

States

Loading State

Show a loading indicator and disable interaction:

<Button loading>Loading...</Button>
<Button variant="secondary" loading>Processing</Button>

Disabled State

Disable user interaction:

<Button disabled>Disabled</Button>
<Button variant="secondary" disabled>Can't Click</Button>

API Reference

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "accent" \| "ghost" \| "error" \| "success" \| "warning"`	`"primary"`	Visual style variant
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Button size
`loading`	`boolean`	`false`	Shows loading spinner and disables interaction
`disabled`	`boolean`	`false`	Disables user interaction
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Button content

All standard HTML button attributes are also supported through spread props.

Accessibility

Supports keyboard navigation (Enter and Space keys)
Proper ARIA attributes for disabled and loading states
Screen reader friendly with appropriate semantic HTML
Focus management built-in

Examples

With Icon (Example)

<Button>
  <span>⚔️</span>
  Attack
</Button>

Full Width

<Button className="w-full">Full Width Button</Button>

On this page