@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { cx } from './cx';
+
+export interface ButtonProps {
+  /** Renders an anchor when set, a button element otherwise. */
+  href?: string;
+  size?: 'default' | 'small';
+  children?: ReactNode;
+}
+
+/** A filled action. Its label names the action: "Talk to us", never "Learn more". */
+export function Button({ href, size = 'default', children }: ButtonProps) {
+  const className = cx('button', size === 'small' && 'button--small');
+  if (href) {
+    return (
+      <a className={className} href={href}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <button className={className} type="button">
+      {children}
+    </button>
+  );
+}