Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neocities-dev/llms.txt

Use this file to discover all available pages before exploring further.

PixelButton is a styled <button> element that combines the bevel-button CSS class with Tailwind utility classes to produce a raised, pressable control consistent with the portfolio’s Y2K aesthetic. It accepts all standard <button> HTML attributes in addition to its own variant and className props.

​
Props

​
variant
string
default:"\"primary\""
Controls the button’s colour scheme. One of three values:
ValueClasses appliedUse case
"primary"bg-y2k-panel text-y2k-cyan hover:text-white hover:bg-y2k-panelDarkDefault call-to-action button
"secondary"bg-y2k-panel text-y2k-textMuted hover:text-whiteSecondary / supporting action
"accent"bg-y2k-magenta text-white hover:bg-y2k-purpleHighlighted / promotional action
​
children
ReactNode
required
Button label or content. For icon-plus-label buttons, pass them as sibling nodes — the base class includes flex items-center justify-center gap-2 so icons and text align automatically.
​
className
string
default:"\"\""
Additional Tailwind classes appended after the variant classes. Use this to override width, padding, or font size, e.g. "w-full text-sm py-1".
All other standard <button> attributes (type, onClick, disabled, aria-label, etc.) are forwarded directly to the underlying <button> element via a rest-props spread.

​
Base styles

Every PixelButton receives these classes regardless of variant: 
bevel-button
px-4 py-2
font-pixel text-xl uppercase tracking-widest
flex items-center justify-center gap-2
transition-all
active:scale-[0.98]
The active:scale-[0.98] transform provides a subtle “press” feedback on click. The bevel-button class (defined in assets/main.css) applies a raised box-shadow that inverts to an inset shadow on :active, simulating a physical button depression.

​
Usage

​
Primary button

<PixelButton variant="primary" onClick={() => console.log("clicked")}>
  Run Demo
</PixelButton>

​
Secondary buttons

<div className="flex gap-2">
  <PixelButton variant="secondary" className="flex-1 text-xs py-1">
    View Source
  </PixelButton>
  <PixelButton variant="secondary" className="flex-1 text-xs py-1">
    README.txt
  </PixelButton>
</div>

​
Accent button

<PixelButton variant="accent">
  Contact Me
</PixelButton>

​
Form submit button

<form onSubmit={handleSubmit}>
  {/* ... form fields ... */}
  <PixelButton type="submit" variant="primary">
    Send It →
  </PixelButton>
</form>

​
Button with icon

Because the base class already includes flex items-center gap-2, you can drop any icon component directly alongside the label: 
import { Rocket } from "lucide-react";

<PixelButton variant="primary">
  <Rocket size={16} />
  Launch
</PixelButton>

​
Full-width button

<PixelButton variant="primary" className="w-full text-sm py-1">
  View All Projects
</PixelButton>

​
The bevel-button class

The bevel-button CSS class is defined in assets/main.css. It applies a multi-layer box-shadow that creates the raised Win95-style bevelled border:
  • Default — outer highlight (top-left) + outer shadow (bottom-right) + inner highlight (top-left) + inner shadow (bottom-right)
  • :active — layers are inverted so the button appears to sink inward
This class is also used on the small window-control buttons inside WindowPanel and on the decorative toolbar buttons in FakeBrowserChrome.
To disable a PixelButton, pass the native disabled attribute. It will be forwarded to the underlying <button> via the rest-props spread. Consider also passing className="opacity-50 cursor-not-allowed" for a visual disabled state, since Tailwind does not style the disabled attribute by default without the disabled: variant.

Build docs developers (and LLMs) love

Get started for freeTalk to us