←
Tactile 'Smash' Button

Tactile 'Smash' Button

Neo-Brutalist

Neo-brutalist tech button with outer enclosure frame, cushion cooling tray, obsidian core slab, and glowing neon reactor underglow.

Interactive Playground & Studio

Live Controls
smash-tactile-button.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Figma Neo-Brutalistvariant="figma"

1:1 Figma Master design with porcelain enclosure tray & dot matrix.

UI Pirate Magmavariant="orange"

Signature magma orange reactor glow with dark obsidian core.

Dark Obsidian Corevariant="dark"

Stealth midnight enclosure with crisp white chamfer bevels.

Cyberpunk Violetvariant="cyberpunk"

High-voltage ultraviolet illumination with matrix array.

Features & Physics

✓Industrial outer enclosure frame
✓Cushion cooling tray ventilation texture
✓Obsidian core slab with 3D press feel
✓Neon reactor underglow bloom

Code & Integration

Customized live with your active playground prop settings:

import SmashTactileButton from "@/components/SmashTactileButton";

export default function Example() {
  return (
    <SmashTactileButton
      label=""
      variant=""
      size="md"
      onClick={() => console.log("Smashed!")}
    />
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
labelstring"Smash the button"Button text.
variant"figma" | "orange" | "dark" | "cyberpunk""figma"Industrial theme variant.