Soft Button

"use client";

import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
import { IconArrowRight } from "@tabler/icons-react";
import { cn } from "@/lib/utils";

// Soft button. A plain button made with care: a gentle top-to-bottom gradient,
// a faint highlight along the inside of the top edge and a little shade along
// the bottom, and a crisp 1px border a step darker than the fill. Hover lifts
// the fill a touch; a press sinks it half a pixel and deepens the inner shade.

export type SoftButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  /** Dark on light (flips in dark mode), quiet neutral, or your accent colour. */
  variant?: "primary" | "secondary" | "accent";
  /** Accent colour, for the accent variant. */
  color?: string;
  size?: "sm" | "md" | "lg";
  /** Shown before the label. */
  icon?: ReactNode;
  /** Shown after the label. */
  iconRight?: ReactNode;
  /** Corner radius, px. */
  radius?: number;
};