IconButton

A square, quiet control for a single icon — toolbars, nav, card corners. No fill at rest; parchment wash on hover. Always pass an accessible label.

jsx

<IconButton label="Copy" ><Icon name="copy" /></IconButton>
<IconButton label="Menu" outline size="lg"><Icon name="menu" /></IconButton>
<IconButton label="Close" onDark><Icon name="x" /></IconButton>

Props: size (sm/md/lg), outline, onDark, disabled, label (required).

Preview

Declarations

TypeScript

export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  size?: 'sm' | 'md' | 'lg';
  /** Show a hairline outline at rest. */
  outline?: boolean;
  onDark?: boolean;
  disabled?: boolean;
  /** Accessible label (required — the button has no text). */
  label: string;
  /** The icon element (e.g. a Lucide <svg>). */
  children: React.ReactNode;
}

/**
 * A square, quiet control holding a single icon. Used in toolbars, nav, and
 * card corners. Always give it an accessible `label`.
 */
export function IconButton(props: IconButtonProps): React.JSX.Element;