Tactile button

1import type { ButtonHTMLAttributes, ReactNode } from "react";2 3export type TactileButtonProps = Omit<4  ButtonHTMLAttributes<HTMLButtonElement>,5  "children"6> & {7  children: ReactNode;8  tone?: "violet" | "coral" | "mint";9  size?: "sm" | "md" | "lg";10};11 12/** A native button whose face moves down toward its fixed base while pressed. */13export function TactileButton({14  children,15  tone = "violet",16  size = "md",17  className = "",18  ...props19}: TactileButtonProps) {20  return (21    <button22      type="button"23      className={`tactile-button tactile-${tone} tactile-${size} ${className}`}24      {...props}25    >26      <span className="tactile-face">{children}</span>27    </button>28  );