Expand README with architecture and setup details

src/ui/Button.tsx

@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export type ButtonVariant = 'primary' | 'neutral' | 'add' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  loadingLabel?: string;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+}
+
+export function Button({
+  variant = 'neutral',
+  size = 'md',
+  loading = false,
+  loadingLabel,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  disabled,
+  ...props
+}: ButtonProps) {
+  const classes = [
+    'ui-button',
+    `ui-button--${variant}`,
+    `ui-button--${size}`,
+    loading ? 'is-loading' : '',
+    className ?? '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button
+      {...props}
+      className={classes}
+      disabled={disabled || loading}
+    >
+      {loading ? <span className="ui-button-spinner" aria-hidden="true" /> : leftIcon ? (
+        <span className="ui-button-icon" aria-hidden="true">{leftIcon}</span>
+      ) : null}
+      <span className="ui-button-label">{loading && loadingLabel ? loadingLabel : children}</span>
+      {!loading && rightIcon ? <span className="ui-button-icon" aria-hidden="true">{rightIcon}</span> : null}
+    </button>
+  );
+}
+