Social / App Store Button

OAuth sign-in button with the provider's mark. `icon` renders a square icon-only button (name stays accessible).

Import

import { SocialButton, StoreBadge } from '@marbleui/ui'

Props

<SocialButton>

Prop	Type	Default
provider *required	`SocialProvider`	`—`
label	`string`	`—`
variant	`'icon' \| 'outline' \| 'solid'`	`'outline'`

Also accepts React Aria props (113).

<StoreBadge>

App store download badge (black, standard proportions).

Prop	Type	Default
store *required	`'app-store' \| 'google-play'`	`—`
className	`string`	`—`
href	`string`	`'#'`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Sign-in button with an OAuth provider’s mark: google, github, apple, microsoft or x. The same module exports StoreBadge, the App Store / Google Play download link. For other actions use Button.

<SocialButton provider="google" onPress={() => signIn('google')} />
<SocialButton provider="github" variant="solid" label="Sign up with GitHub" onPress={() => signIn('github')} />
<StoreBadge store="app-store" href="https://apps.apple.com/app/id1234567890" />

The text defaults to “Continue with” plus the provider name; label replaces it. It’s a React Aria button, so wire it with onPress.
variant="solid" only changes github, apple and x; Google and Microsoft stay outlined.
variant="icon" hides the text and uses it as the aria-label, so screen readers still hear “Continue with Google”. An aria-label you pass wins.
StoreBadge is a plain link, black in both themes, and href defaults to #, so always pass the store URL.

Example source · show

import { SocialButton, StoreBadge } from './social-button'

const all = ['google', 'github', 'apple', 'microsoft', 'x'] as const
export const styles = {
  Outline: () => <div className="flex w-72 flex-col gap-2">{all.map((p) => <SocialButton key={p} provider={p} />)}</div>,
  Solid: () => <div className="flex w-72 flex-col gap-2">{(['github', 'apple', 'x'] as const).map((p) => <SocialButton key={p} provider={p} variant="solid" />)}</div>,
  'Icon only': () => <div className="flex gap-2">{all.map((p) => <SocialButton key={p} provider={p} variant="icon" />)}</div>,
  'Store badges': () => <div className="flex gap-3"><StoreBadge store="app-store" /><StoreBadge store="google-play" /></div>,
}

Source: packages/ui/src/social-button/social-button.tsx

Catalog

Category: inputs
Priority: Extra
Primitive: composed
React Aria: Button
Base UI: Button