Button

The primary action control — sentence-case IBM Plex Mono label (never uppercase), tight corners, a 1px press nudge (no scale). Use when the user takes an action.

jsx

<Button variant="primary" size="md">Get started</Button>
<Button variant="ghost" as="a" href="/docs">Read the docs</Button>
<Button variant="gilt" iconLeft={<Icon name="arrow-right" />}>Install</Button>

Variants: primary (racing green), secondary (oxblood), gilt (brass, dark label), ghost (hairline outline), quiet (text-only). Sizes: sm · md · lg. Pass as="a" for link-buttons; disabled drops opacity to .45.

Preview

Declarations

TypeScript

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Visual treatment. primary = racing green, secondary = oxblood,
   *  gilt = brass, ghost = hairline outline, quiet = text-only. */
  variant?: 'primary' | 'secondary' | 'gilt' | 'ghost' | 'quiet';
  size?: 'sm' | 'md' | 'lg';
  /** Render as a different element, e.g. 'a' for a link-button. */
  as?: 'button' | 'a';
  disabled?: boolean;
  /** Icon element rendered before the label. */
  iconLeft?: React.ReactNode;
  /** Icon element rendered after the label. */
  iconRight?: React.ReactNode;
  className?: string;
  children?: React.ReactNode;
}

/**
 * Primary action control. Uppercase mono label, near-square corners, no bounce.
 */
export function Button(props: ButtonProps): React.JSX.Element;