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" />
</>Custom provider (an IdP outside the enum)
Pass an object to provider to support self-hosted OIDC or any brand that is not bundled; the skin is identical to the built-in providers. Omitting brandColor selects the monochrome treatment.
// Keep it at module scope: the component uses memo, and an inline object breaks memo
const KEYCLOAK: SocialBrand = { label: "Enterprise SSO", icon: <LockIcon /> };
<SocialButton provider={KEYCLOAK} />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. For providers outside the built-in list (self-hosted OIDC, Keycloak, Authentik, Okta, enterprise SSO, or any brand that is not bundled), pass an object to provider; see "Custom providers" below. 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" | "discord" | "gitlab" | SocialBrand | - | Determines the logo, default label, and brand color. Pass a SocialBrand object to use a provider outside the built-in list; its fields are listed below. |
| 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 |
SocialBrand (custom providers)
Fields accepted when provider is an object. Sizing, shape, loading, press feedback, and focus ring are shared with the built-in brands.
| Name | Type | Default | Description |
|---|---|---|---|
| icon* | ReactNode | - | Brand logo. An inline <svg>, an <img>, or an icon component; it is constrained to the icon size of the current size. |
| label* | string | - | Brand name. Used for the default label and for the aria-label when shape="icon". |
| brandColor | string | - | Brand color. Tints the logo in outline mode and fills the button in solid mode. Omitting it selects the monochrome treatment used by the built-in GitHub, X, and Apple buttons. |
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 />{/* Custom provider. Keep the object at module scope: the component is memoized. */}
const KEYCLOAK: SocialBrand = { label: "Enterprise SSO", icon: <LockIcon /> };
<SocialButton provider={KEYCLOAK} />Usage guidelines
- Keep a custom brand object at module scope (or wrap it in
useMemo). The component is memoized, so an inlineprovider={{ ... }}object literal creates a new reference on every render and defeats that memoization. - Do not wait for the enum to grow. simple-icons removed the Microsoft, LinkedIn, Slack, and Feishu logos on legal request, so those cannot be bundled at all, and self-hosted identity providers are impossible to enumerate. Reach for
SocialBrandinstead of dropping the whole group back toButtonwith hand-placed SVGs because two providers out of four are missing. loadingdisables the button automatically, so an additionaldisabledprop 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. A custom brand without
brandColoruses the same treatment.
Related
Button · ShimmerButton · RainbowButton · PulsatingButton · RippleButton · ButtonGroup
Playground
<SocialButton provider="wechat" />