SocialButton
social-button第三方登录按钮 · 微信/支付宝/QQ/微博 + GitHub/Google/Apple/X 品牌 logo(内联 simple-icons·零依赖) + outline/solid 变体 + 纯 logo 方钮 + loading · 黑白系品牌 solid 随主题前景避暗色不可见
用法
基础用法
传 provider 即得品牌 logo + 默认登录文案。
tsx
<SocialButton provider="wechat" />国内 / 国际平台
内置微信/支付宝/QQ/微博与 GitHub/Google/Apple/X 等品牌。
tsx
<>
<SocialButton provider="wechat" />
<SocialButton provider="alipay" />
<SocialButton provider="github" />
<SocialButton provider="google" />
</>填充变体
variant=solid 用品牌色填充（黑白系品牌随主题前景）。
tsx
<>
<SocialButton provider="wechat" variant="solid" />
<SocialButton provider="github" variant="solid" />
</>纯 logo 方钮
shape=icon 只渲染品牌 logo，适合紧凑工具条。
tsx
<>
<SocialButton provider="wechat" shape="icon" />
<SocialButton provider="alipay" shape="icon" variant="solid" />
</>尺寸 / 加载 / 禁用
size 三档；loading 转圈并禁用，disabled 屏蔽交互。
tsx
<>
<SocialButton provider="wechat" size="sm" />
<SocialButton provider="wechat" size="lg" />
<SocialButton provider="github" loading />
<SocialButton provider="google" disabled />
</>何时用
第三方账号登录/绑定入口（微信、支付宝、QQ、微博、GitHub、Google、Apple、X）。内置品牌 logo、默认文案与品牌色，无需自己接 simple-icons。普通操作按钮用 Button；需要把多个登录方式编成一组用 ButtonGroup 包裹。
导入
ts
import { SocialButton } from "@hulianui/ui"Props
继承原生 <button> 属性（除 children 受控覆盖外）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| provider* | "wechat" ｜ "alipay" ｜ "qq" ｜ "weibo" ｜ "github" ｜ "google" ｜ "apple" ｜ "x" | — | 第三方平台，决定 logo、默认文案与品牌色 |
| variant | "solid" ｜ "outline" | "outline" | solid=品牌色填充（黑白品牌随主题前景）；outline=描边中性底 + 品牌色 logo（推荐） |
| shape | "button" ｜ "icon" | "button" | button=带文案；icon=纯 logo 方钮 |
| size | "sm" ｜ "md" ｜ "lg" | "md" | 尺寸 |
| loading | boolean | false | 提交中：logo 替换为转圈并禁用 |
| className | string | — | 透传根节点类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | 透传原生点击回调（发起第三方登录/绑定） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 覆盖默认文案（如「使用微信登录」→「微信」） |
禁忌 / 坑
暂无已知坑。loading 会自动禁用按钮，无需额外传 disabled。github/x/apple 黑白系品牌的 solid 态会跟随主题前景色，避免在暗色下不可见——不要硬写品牌黑覆盖。
相关
Button · ShimmerButton · RainbowButton · PulsatingButton · RippleButton · ButtonGroup
Playground
<SocialButton provider="wechat" />