import * as React from "react";

/**
 * The pill-shaped action control. Primary navy fill is the default;
 * ghost variants are bordered; the on-dark pair is for ink-navy sections.
 *
 * @startingPoint section="Buttons" subtitle="Primary, ghost & on-dark pill buttons" viewport="700x150"
 */
export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
  children?: React.ReactNode;
  /** Visual style. @default "primary" */
  variant?: "primary" | "ghost" | "onDark" | "ghostDark";
  /** @default "md" */
  size?: "sm" | "md" | "lg";
  /** Show the trailing arrow that nudges right on hover. @default false */
  arrow?: boolean;
  /** Optional leading icon node. */
  icon?: React.ReactNode;
  /** Render as an anchor when set. */
  href?: string;
  type?: "button" | "submit" | "reset";
  disabled?: boolean;
  style?: React.CSSProperties;
}

export function Button(props: ButtonProps): JSX.Element;