# Button Retro

> Square-cornered retro game button with a mono font and 8-bit hard shadow that collapses on press.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/button-retro
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/button-retro.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/button-retro-demo.tsx"
import { Gamepad2 } from "lucide-react"

import { RetroButton } from "@/components/button-retro"

export default function ButtonRetroDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 p-8">
      <RetroButton>
        <Gamepad2 className="size-4" /> Start
      </RetroButton>
      <RetroButton color="green">Continue</RetroButton>
      <RetroButton color="pink">Options</RetroButton>
      <RetroButton color="sky">Quit</RetroButton>
    </div>
  )
}
```

## Source

```tsx title="components/button-retro.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const palettes = {
  amber: "bg-amber-300 text-amber-950 shadow-[4px_4px_0_0_#78350f] hover:bg-amber-200 active:shadow-[0_0_0_0_#78350f]",
  green: "bg-lime-300 text-lime-950 shadow-[4px_4px_0_0_#365314] hover:bg-lime-200 active:shadow-[0_0_0_0_#365314]",
  pink: "bg-pink-300 text-pink-950 shadow-[4px_4px_0_0_#831843] hover:bg-pink-200 active:shadow-[0_0_0_0_#831843]",
  sky: "bg-sky-300 text-sky-950 shadow-[4px_4px_0_0_#0c4a6e] hover:bg-sky-200 active:shadow-[0_0_0_0_#0c4a6e]",
} as const

export interface RetroButtonProps extends React.ComponentProps<"button"> {
  color?: keyof typeof palettes
}

export function RetroButton({ color = "amber", className, children, ...props }: RetroButtonProps) {
  return (
    <button
      className={cn(
        "inline-flex h-11 items-center justify-center gap-2 rounded-none border-2 border-black px-5 font-mono text-sm font-bold uppercase tracking-wider",
        "transition-[transform,box-shadow,background-color] duration-75 active:translate-x-1 active:translate-y-1",
        "focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-dashed focus-visible:outline-foreground",
        "disabled:pointer-events-none disabled:opacity-50",
        palettes[color],
        className
      )}
      {...props}
    >
      {children}
    </button>
  )
}
```