Button 组件交互原型

包含默认、悬停、点击、加载、禁用五种状态的按钮组件，支持不同尺寸和变体。

组件预览区域

此原型包含自定义组件代码，可通过 React Island 渲染。

查看源代码


              export function Button({ variant = 'primary', size = 'md', loading, children }) {
  const base = 'rounded-lg font-medium transition-all';
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    ghost: 'bg-transparent hover:bg-gray-100'
  };
  const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' };
  return (
    <button className={`${base} ${variants[variant]} ${sizes[size]}`} disabled={loading}>
      {loading ? '加载中...' : children}
    </button>
  );
}