Skip to main content

Documentation Index

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

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

ChunkyButton is the primary interactive element of the Y2K Webring portfolio. It renders a thick-bordered, fully-uppercase button (or anchor link) that communicates its clickability through a neon border-chunky-{color} frame, an inverted hover fill, and subtle Framer Motion scale animations on both hover and tap. Use it for CTAs, navigation links, form submits, and any action that should feel deliberately, defiantly Y2K.

​
Props

​
children
ReactNode
required
The button label content. Any valid JSX is accepted, though plain text is the most common value given the uppercase styling.
​
color
string
default:"lime"
Sets the border color, text color at rest, and fill color on hover. Accepts "magenta", "lime", or "cyan" — the same three palette values used across the Y2K component suite. Resolves to border-chunky-{color} and text-y2k-{color} / hover:bg-y2k-{color}.
​
size
"sm" | "md" | "lg"
default:"\"md\""
Controls padding and font size. See the Size Variants table for exact Tailwind class values.
​
as
"button" | "a"
default:"\"button\""
Switches the underlying element between a motion.button and a motion.a. Pass as="a" together with an href prop to render a styled anchor link instead of a form button.
​
className
string
default:"\"\""
Extra class names merged onto the element. Useful for adding w-full or custom margin/grid placement from a parent layout.
​
...rest
object
All additional props are spread directly onto the underlying motion.button or motion.a element. This means standard attributes like onClick, disabled, href, target, aria-label, and type all work as expected.

​
Size Variants

sizeTailwind classesTypical use
"sm"px-3 py-1 text-smSecondary actions, inline tags
"md" (default)px-5 py-2 text-baseStandard buttons and nav links
"lg"px-8 py-3 text-lg font-boldHero CTAs, primary page actions

​
Usage Examples

import { ChunkyButton } from '../components/y2k/ChunkyButton';

export function SubmitAction() {
  return (
    <ChunkyButton onClick={() => console.log('clicked')}>
      Submit
    </ChunkyButton>
  );
}

​
Interaction

ChunkyButton uses Framer Motion’s whileHover and whileTap gesture props so the scale response is driven by the animation engine rather than a CSS transform, keeping it in sync with any parent layout animations:
GestureTransform
whileHoverscale: 1.02 — a gentle grow that confirms the element is interactive
whileTapscale: 0.98 — a brief press-down that mimics physical button feedback
In addition to the scale animation, a CSS transition-colors duration-200 swap inverts the color scheme on hover:
  • Rest: bg-y2k-black background, text-y2k-{color} label.
  • Hover: hover:bg-y2k-{color} fill, hover:text-y2k-black label — a full inversion that makes the neon color flood the button.
The transition-colors CSS transition and Framer Motion whileHover scale run concurrently and do not conflict. The color swap is handled by CSS while the scale is driven by Framer Motion.

Build docs developers (and LLMs) love

Get started for freeTalk to us