Skip to main content

Documentation Index

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

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

BeveledButton is the standard interactive control throughout Digital Domain. It wraps a Framer Motion motion.button with the characteristic Windows 98 raised-bevel appearance: a light highlight on the top/left edges and a dark shadow on the bottom/right edges, created by the shadow-win-btn Tailwind utility. When pressed — either by physical click or by the active prop — the shadow is inverted to shadow-win-btn-active and the element translates 1 px down and to the right, replicating the mechanical feel of a real Win98 button.

​
Import

import { B as BeveledButton } from '../components/BeveledButton.js';

​
Props

​
children
ReactNode
required
The button’s visible label or content. Can be a plain string, an icon, or a flex row combining both. The button does not add any padding around icons — use a flex items-center gap-2 wrapper inside children when pairing text with a Lucide icon.
​
active
boolean
When true, applies shadow-win-btn-active translate-y-[1px] translate-x-[1px] statically, showing a permanently depressed/pressed state. Used by taskbar buttons in the Skills desktop to indicate which window is currently focused. Defaults to false.
​
className
string
Additional Tailwind classes merged onto the button element. Common overrides include custom background colours (bg-retro-pink), font size (text-xl), and padding (py-2 px-8). Base classes (bg-win-gray, font-comic, shadow-win-btn, etc.) remain unless explicitly overridden with a ! modifier.
​
onClick
function
Standard click handler forwarded to the underlying motion.button. Fires on pointer release.
All standard HTML <button> attributes (e.g. type, disabled, aria-label, form) are forwarded to the underlying motion.button element via rest-props spread. Set type="submit" explicitly when using BeveledButton as the submit control inside a <form> — no type default is enforced by the component itself.

​
Usage

import { B as BeveledButton } from '../components/BeveledButton.js';
import { ExternalLink } from 'lucide-react';

// Standard button
<BeveledButton onClick={() => console.log('clicked!')}>
  Click Me
</BeveledButton>

// Active/pressed state (used by taskbar buttons to show focused window)
<BeveledButton active={isActive}>
  Skills.exe
</BeveledButton>

// As a submit button inside a form
<BeveledButton type="submit" className="text-xl py-2 px-8">
  SUBMIT!!
</BeveledButton>

// With an icon
<BeveledButton className="flex items-center gap-2">
  <ExternalLink size={14} /> View Live
</BeveledButton>

​
Navigation links wrapping BeveledButton

On the home page webring section, BeveledButton is wrapped in a React Router <Link> rather than using its own onClick. This is the idiomatic pattern for navigation buttons throughout the SPA: 
import { Link } from 'react-router-dom';
import { B as BeveledButton } from '../components/BeveledButton.js';

<div className="flex flex-wrap justify-center gap-2">
  <Link to="/about">
    <BeveledButton>About Me</BeveledButton>
  </Link>
  <Link to="/projects">
    <BeveledButton>Cool Projects</BeveledButton>
  </Link>
  <Link to="/skills">
    <BeveledButton>Skillz</BeveledButton>
  </Link>
</div>

​
Blog category filter buttons

The Blog page uses the active prop to highlight the currently selected category: 
const categories = ['All', 'Hot Takes', 'Essays', 'Updates'];
const [selected, setSelected] = useState('All');

<div className="flex justify-center gap-2">
  {categories.map((cat) => (
    <BeveledButton
      key={cat}
      active={selected === cat}
      onClick={() => setSelected(cat)}
    >
      {cat}
    </BeveledButton>
  ))}
</div>

​
Visual behaviour

StateClasses applied
Defaultshadow-win-btn — raised highlight top-left, shadow bottom-right
HoveredNo visual change (Win98 accurate — hover states were not common)
Pressed (:active)active:shadow-win-btn-active active:translate-y-[1px] active:translate-x-[1px]
active prop = trueshadow-win-btn-active translate-y-[1px] translate-x-[1px] applied statically
Focusedfocus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-1 focus:ring-offset-win-gray
Framer Motion also applies a subtle whileTap={{ scale: 0.98 }} to provide a slight shrink on press in addition to the translate, giving the button a satisfying physical feel.

​
Styling defaults

The base button renders with the following Tailwind classes before any className override: 
px-4 py-1 bg-win-gray font-comic text-sm font-bold shadow-win-btn
active:shadow-win-btn-active active:translate-y-[1px] active:translate-x-[1px]
focus:outline-none focus:ring-1 focus:ring-black
focus:ring-offset-1 focus:ring-offset-win-gray
bg-win-gray is a custom Tailwind colour defined in the project’s tailwind.config.js as the classic Windows 98 button-face grey (#C0C0C0). The shadow-win-btn and shadow-win-btn-active utilities are also custom — they use box-shadow with hard pixel offsets to replicate the two-tone bevel rather than a blurred drop shadow.

Build docs developers (and LLMs) love

Get started for freeTalk to us