Build · New

Social Button

Sign in with Google and Apple, with each provider's logo and colors. The provider name stays in Latin script inside Arabic labels.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/social-button

Dependencies it brings: @base-ui/react

Usage

import { SocialButton } from "@/components/ui/social-button";

<SocialButton provider="google" label="Sign in with Google" render={<a href="/auth/google" />} />

Examples

Themes and icon only

brand uses the provider's colors (Apple in black), color is neutral. Google looks the same in both. iconOnly is a 44px square; label stays its name for screen readers.

API reference

SocialButton

Any other Base UI Button prop passes through (onClick…).

Prop	Type	Default	Description
`provider`	`"google" \| "apple"`		Figma's Social.
`label`	`string`		Required. The visible text, or the button's name with `iconOnly`. Keep the provider name in Latin script.
`theme`	`"brand" \| "color"`	`"brand"`	Figma's Theme.
`iconOnly`	`boolean`	`false`	Figma's Only icon.
`render`	`ReactElement`		The OAuth redirect link with the button look; it keeps its semantics.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves focus to the button and shows the ring.
`EnterSpace`	Starts sign-in (Enter only for a link).

ARIA

The logo is decorative; the name is the text “Sign in with Google”, or label when icon-only.
The provider name is wrapped in <bdi dir="ltr"> automatically, so punctuation around it doesn't flip in Arabic.

Arabic and RTL notes

Mirrors

The logo sits at the inline start (the right in Arabic), the text after it.

Does not mirror

Logos never mirror, and the provider name is never translated or transliterated (“Google”, not “جوجل”).

Numerals: These buttons hold no numbers.
Arabic typography: body-16 Semibold, at a 44px height that fits Arabic.
Mixed-direction text: “تسجيل الدخول باستخدام Google”: the Latin name is isolated, so it stays at the end of the line as it's read.

All components ›