import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react"

type ButtonVariant = "primary" | "secondary"
type ButtonSize = "sm" | "md" | "lg"

interface Button01SharedProps {
  variant?: ButtonVariant
  size?: ButtonSize
  /** Shows a trailing arrow that nudges right on hover — off by default so
   *  the component works for plain actions too, not just CTAs. */
  showArrow?: boolean
  className?: string
  children: ReactNode
}

type Button01Props =
  | (Button01SharedProps & { href: string } & Omit<
        AnchorHTMLAttributes<HTMLAnchorElement>,
        keyof Button01SharedProps | "href"
      >)
  | (Button01SharedProps & { href?: undefined } & Omit<
        ButtonHTMLAttributes<HTMLButtonElement>,
        keyof Button01SharedProps
      >)

const BASE_CLASSES =
  "group inline-flex items-center justify-center rounded-lg border font-semibold whitespace-nowrap transition-colors duration-150 ease-out motion-reduce:transition-none outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50"

const VARIANT_CLASSES: Record<ButtonVariant, string> = {
  primary: "border-slate-900 bg-slate-900 text-white hover:bg-slate-700 active:bg-slate-950",
  secondary: "border-slate-300 bg-white text-slate-900 hover:border-slate-400 hover:bg-slate-50 active:bg-slate-100",
}

const SIZE_CLASSES: Record<ButtonSize, string> = {
  sm: "h-9 gap-1.5 px-4 text-sm",
  md: "h-11 gap-2 px-6 text-sm",
  lg: "h-12 gap-2.5 px-7 text-base",
}

function ButtonArrow() {
  return (
    <svg
      className="size-4 shrink-0 transition-transform duration-200 ease-out group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0"
      viewBox="0 0 16 16"
      fill="none"
      aria-hidden="true"
    >
      <path
        d="M3.5 8h9M8.5 3.5 13 8l-4.5 4.5"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

function Button01({ variant = "primary", size = "md", showArrow = false, className, children, ...rest }: Button01Props) {
  const classes = [BASE_CLASSES, VARIANT_CLASSES[variant], SIZE_CLASSES[size], className].filter(Boolean).join(" ")
  const arrow = showArrow ? <ButtonArrow /> : null

  if (rest.href !== undefined) {
    return (
      <a className={classes} {...rest}>
        {children}
        {arrow}
      </a>
    )
  }

  return (
    <button type={rest.type ?? "button"} className={classes} {...rest}>
      {children}
      {arrow}
    </button>
  )
}

export { Button01 }
export type { Button01Props, ButtonVariant, ButtonSize }
Button 01

Requirements

Dependencies

Usage
