←
Tactile 3D Pill Button

Tactile 3D Pill Button

3D Tactile Spring

Hyper-realistic 3D tactile button with recessed cavity slot, spring tilt physics, specular bevels, and glowing status beacon.

Interactive Playground & Studio

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

All Variants & Themes

Click to test interactive spring physics on every theme

Figma Cyan Beaconvariant="default"

1:1 Figma Master design with turquoise indicator dot.

UI Pirate Magmavariant="orange"

Signature magma orange pill cap with glowing amber beacon.

Dark Obsidianvariant="dark"

Stealth midnight pill with violet status indicator.

Cyberpunk Matrixvariant="cyberpunk"

Neon reactor green beacon with tactile recessed tray.

Minimal Cleanvariant="minimal"

Crisp clean tactile pill with sapphire status beacon.

Tilted State PreviewstateMode="tilted"

Fixed mechanical spring tilt position (-9.23° angle).

Features & Physics

✓Recessed cavity slot with 3D depth shadows
✓Interactive 60fps spring tilt and depress on click
✓Pulsing radiant status beacon dot
✓Light and dark mode tailored specular lighting

Code & Integration

Customized live with your active playground prop settings:

import TactilePillButton from "@/components/TactilePillButton";

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

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"Get Started"Primary button call-to-action text.
dotColorstring"#00E5BE"Hex color code for the radiant glowing beacon indicator.
variant"default" | "dark" | "orange" | "cyberpunk" | "minimal""default"Theme style variant matching light or dark surfaces.
onClick() => voidundefinedOptional click handler event.