primitives

Pressed Metal Button

A skeuomorphic 'brushed metal / pressed key' button with a vertical light-to-dark gradient face, a 1 px token-driven border, and crisp inset box-shadows that simulate a convex metal surface lit from above. Pressing the button deepens the insets and applies a 1 px translateY for a tactile physical-press feel. Fully accessible: native button semantics, keyboard operable, and a focus-visible ring from --ring.

Ported from dalioscode (MIT)

Install

1. Register the namespace (once per project):

json

// components.json — register the @bottega namespace once
{
  "registries": {
    "@bottega": { "url": "https://bottega.ariacode.ca/r/{name}.json" }
  }
}

2. Add the component:

bash

npx shadcn add @bottega/pressed-metal-button

Usage

Usagetsx

<PressedMetalButton />

Props

Standard props — see source.

Source

pressed-metal-button.tsxtsx

"use client";

import type React from "react";
import styles from "./pressed-metal-button.module.css";

export type PressedMetalButtonProps = React.ComponentProps<"button">;

export function PressedMetalButton({
  children = "Proceed",
  className,
  ...props
}: PressedMetalButtonProps) {
  const cls = [
    // layout + type
    "inline-flex cursor-pointer items-center gap-1",
    // shape + border
    "rounded-[var(--radius)] border border-border",
    // spacing + text
    "px-4 py-2 font-semibold text-foreground",
    // focus ring
    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
    // disabled
    "disabled:cursor-not-allowed disabled:opacity-40",
    // gradient face + inset shadows live in the module (need CSS vars)
    styles.btn,
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <button type="button" className={cls} {...props}>
      {children}
    </button>
  );
}

Dependencies

@bottega/tokens