primitives

Iso 3D Button

An isometric 3D push button with a token-driven face gradient and extruded side/bottom faces via CSS pseudo-elements. At rest the face is tilted (rotateX 70° rotateZ 30°) for a tactile depth effect; hover transitions it toward upright (rotateX 30° rotateZ 0°) with a smooth 0.5s ease. Fully accessible: native button semantics, keyboard operable, focus-visible ring from --ring.

Ported from mobinkakei (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/iso-3d-button

Usage

Usagetsx

<Iso3dButton />

Props

Standard props — see source.

Source

iso-3d-button.tsxtsx

"use client";

import type React from "react";
import styles from "./iso-3d-button.module.css";

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

/**
 * Iso3dButton — isometric 3D push button.
 *
 * Renders at a resting isometric tilt (rotateX 70° rotateZ 30°) with extruded
 * bottom and right faces via CSS pseudo-elements. Hover rotates the face toward
 * upright for a tactile "press" feel. Fully token-driven; no hardcoded colors.
 */
export function Iso3dButton({
  children = "3D Button",
  className,
  ...props
}: Iso3dButtonProps) {
  return (
    <button
      type="button"
      className={[styles.btn, className].filter(Boolean).join(" ")}
      {...props}
    >
      {children}
    </button>
  );
}

Dependencies

@bottega/tokens