Press-depth button

import PressDepthButton from "@/components/buildwithme/press-depth-button/react";

<PressDepthButton />

// MIT · BuildWithMe-UI contributors. Original implementation.
'use client';
import { useAnimation, type AnimationProps } from './use-animation';
import './base.css';
import './press-depth-button.css';

export default function PressDepthButton({
  paused = false,
  label = 'Give it a push',
  onClick,
}: AnimationProps & { label?: string; onClick?: () => void }) {
  const { ref, active } = useAnimation(paused);
  return (
    <div ref={ref} className="bw-demo" data-active={active}>
      <button type="button" className="bw-button bw-depth" onClick={onClick}>
        {label}
      </button>
    </div>
  );
}

Install the registry item to receive all 7 files and their declared dependencies. Copying one file may require the other files shown here.