←
Vintage Leather & Brass Button

Vintage Leather & Brass Button

Heritage Leather

Luxury embossed heritage leather & brass button with 6px bottom tactile bevel lip, recessed enclosure tray, and filigree scrollwork corner flourishes.

Interactive Playground & Studio

Live Controls
vintage-leather-cta.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Heritage Brasstheme="heritage"

1:1 Figma Master design with embossed cowhide leather & brass lip.

UI Pirate Bronzetheme="uipirate"

Signature magma orange leather with filigree corner ornaments.

Obsidian Platinumtheme="obsidian"

Stealth midnight black leather with platinum bevel edging.

Emerald Imperialtheme="emerald"

Royal jade leather with golden scrollwork corner flourishes.

Ruby Royaltytheme="ruby"

Deep burgundy wine leather with gilded golden tactile bevel.

Silver Armourtheme="silver"

Medieval steel & silver chassis with filigree corner ornaments.

Features & Physics

✓Embossed heritage leather texture with brass lip
✓Filigree scrollwork corner ornaments
✓Recessed enclosure tray with tactile 3D bevel
✓6 Luxury artisanal themes

Code & Integration

Customized live with your active playground prop settings:

import { VintageLeatherCTA } from "@/components/VintageLeatherCTA";

export default function Example() {
  return (
    <VintageLeatherCTA
      label=""
      theme=""
      size="md"
      onClick={() => console.log("Leather button pressed")}
    />
  );
}

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"Shop ties"Artisanal CTA label.
theme"heritage" | "uipirate" | "obsidian" | "emerald" | "ruby" | "silver""heritage"Leather color palette.
size"xs" | "sm" | "md" | "lg" | "xl""md"Size dimensions.