Social button components

FREE

Free and open-source React social button components built for modern applications and websites. These social buttons are built using React Aria and styled with Tailwind CSS.

Social buttons example

Installation

You can add this social button component using our CLI or manually:

npx untitledui@latest add social-button

Social button examples

Below are examples and variations of this social button component:

Google social buttons

Facebook social buttons

Apple social buttons

Twitter social buttons

Figma social buttons

Dribble social buttons

Social button group examples

Below are examples and variations of this social button group component:

Brand social buttons group

Color social buttons group

Gray social buttons group

API reference

SocialButton

Import SocialButton from @/components/base/buttons/social-button. Renders React Aria’s Button — all of its props are supported.

SocialButton props
PropTypeDefaultDescription
social* (required)
"google""facebook""apple""twitter""figma""dribble"
—The provider the button signs in with, which selects both the logo and the brand color.
isDisabledboolean—Disables the button and shows a disabled state.
disabledboolean—Deprecated.Disables the button and shows a disabled state.
theme
"brand""color""gray"
"brand"How the provider branding is applied. brand fills the button with the provider's color, color keeps a neutral button with a full-color logo, and gray keeps both neutral.
size
"md""lg"
"lg"Controls the padding, text size and logo size of the button.
childrenReactNode—The button label. Omitting it renders a square, icon-only button.
classNamestring—The class name applied to the button.
Props from React Aria (23)
SocialButton inherited props
PropTypeDefaultDescription
onClick((e: MouseEvent<FocusableElement>) => void)—Not recommended – use onPress instead. onClick is an alias for onPress provided for compatibility with other libraries. onPress provides additional event details for non-mouse interactions.
onPress((e: PressEvent) => void)—Handler that is called when the press is released over the target.
onPressChange((isPressed: boolean) => void)—Handler that is called when the press state changes.
onPressEnd((e: PressEvent) => void)—Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressStart((e: PressEvent) => void)—Handler that is called when a press interaction starts.
onPressUp((e: PressEvent) => void)—Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
onHoverChange((isHovering: boolean) => void)—Handler that is called when the hover state changes.
onHoverEnd((e: HoverEvent) => void)—Handler that is called when a hover interaction ends.
onHoverStart((e: HoverEvent) => void)—Handler that is called when a hover interaction starts.
onBlur((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
idstring—The element's unique identifier.
styleStyleOrFunction<T>—The inline style for the element. A function may be provided to compute the style based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
render(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | JSX.IntrinsicElements[Fallback], renderProps: T) => ReactElement—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Note: You can check if 'href' in props in order to tell whether to render an <a> element.Requirements:
  • You must render the expected element type (e.g. if <a> is expected, you cannot render a <button>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

FAQs

Please refer to our frequently asked questions page for more.

Set the social prop to "google", "facebook", "apple", "twitter", "figma" or "dribble". Note that the Dribbble button uses the spelling "dribble".

The default "brand" theme uses each platform's colors: blue for Facebook, pink for Dribbble, black for Apple, Twitter and Figma, and a neutral button for Google. "color" uses a neutral button with the colored logo (Apple and Twitter stay black), and "gray" uses a neutral button with a gray logo.

Social buttons support "md" and "lg" through the size prop. The default is "lg".

Leave out the children. The button switches to square padding and shows only the logo. Add an aria-label such as aria-label="Sign in with Google", since there is no visible text.

No, they only render the button. Handle the click with onPress and call your auth provider there, or pass href to render the button as a link to your sign-in URL.

Set isDisabled to true. The older disabled prop still works but is deprecated. When the button renders as a link, disabling it also removes the href.

SlidersTags