SocialButton
social-buttonProvides branded sign-in buttons with service icons and loading states.
Usage
Basic usage
Pass provider to get the brand logo + default login copy.
<SocialButton provider="wechat" />Domestic / International Platform
Built-in WeChat/Alipay/QQ/Weibo and GitHub/Google/Apple/X and other brands.
<>
<SocialButton provider="wechat" />
<SocialButton provider="alipay" />
<SocialButton provider="github" />
<SocialButton provider="google" />
</>Filled variant
variant=solid Fill with brand color (black and white brand follows the theme foreground).
<>
<SocialButton provider="wechat" variant="solid" />
<SocialButton provider="github" variant="solid" />
</>Pure logo square button
shape=icon Renders only brand logo, suitable for compact toolbars.
<>
<SocialButton provider="wechat" shape="icon" />
<SocialButton provider="alipay" shape="icon" variant="solid" />
</>Size/Load/Disable
size third gear; loading circles and disables, disabled blocks interaction.
<>
<SocialButton provider="wechat" size="sm" />
<SocialButton provider="wechat" size="lg" />
<SocialButton provider="github" loading />
<SocialButton provider="google" disabled />
</>When to use
Use SocialButton for third-party account sign-in or linking. Brand logos, default labels, and colors are built in, so consumers do not need to wire simple-icons directly. Use Button for ordinary actions, and ButtonGroup when several sign-in providers should be presented together.
Import
import { SocialButton } from "@hulianui/ui"Props
Inherit native <button> properties (except children controlled override).
| Name | Type | Default | Description |
|---|---|---|---|
| provider* | "wechat" | "alipay" | "qq" | "weibo" | "github" | "google" | "apple" | "x" | — | Determines the logo, default label, and brand color. |
| variant | "solid" | "outline" | "outline" | solid uses a brand fill; monochrome brands use theme foreground. outline uses a neutral border and brand-color logo. |
| shape | "button" | "icon" | "button" | button includes a label; icon renders a square logo-only button. |
| size | "sm" | "md" | "lg" | "md" | size |
| loading | boolean | false | Submitting: Replace the logo with a spinning circle and disable it |
| className | string | — | Transparently transmit the root node class name |
Events
| Event | Type | Description |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | Transparently transmit native click callback (initiate third-party login/binding) |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Override the default copy (such as "Log in using WeChat" → "WeChat") |
Example
<SocialButton provider="wechat" />
<SocialButton provider="github" variant="solid" />{/* Icon-only button and loading state */}
<SocialButton provider="alipay" shape="icon" />
<SocialButton provider="github" loading />Usage guidelines
loading disables the button automatically, so an additional disabled prop is unnecessary. In solid mode, monochrome GitHub, X, and Apple buttons follow the theme foreground to remain visible in dark themes; do not override them with hard-coded black.
Related
Button · ShimmerButton · RainbowButton · PulsatingButton · RippleButton · ButtonGroup
Playground
<SocialButton provider="wechat" />