Developer mode
Opens components on the React tab by default.
Your bookmarks

SocialButton

Lets users sign in using a social service.

Users often don’t want to create new accounts for every service they use. Some like using identity managers they know and trust.

Shorten the time to access your service by offering them the chance to sign in with a trusted provider using a SocialButton.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released
Social service logo: shows the logo of the given sign-in service; label: nudges the user to complete the sign-in flow.

SocialButton services

Social buttons automatically display the logo for the selected service. See all available services below.

import SocialButton from "@kiwicom/orbit-components/lib/SocialButton";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => (
  <Stack direction="column">
    <SocialButton type="apple">Sign in with Apple </SocialButton>
    <SocialButton type="facebook">Sign in with Facebook </SocialButton>
    <SocialButton type="google">Sign in with Google </SocialButton>
    <SocialButton type="twitter">Sign in with Twitter </SocialButton>
  </Stack>
)

Guidelines               

Use actionable text

It should be clear from the button text exactly what will happen when the user interacts with it. To make it actionable, the label should include the service name and the action text sign in.

Be sure to use the same text structure for all social buttons.

Use full width in small spaces

As with other buttons, social buttons work best as full length buttons on smaller screens. 

Use only for signing in

Social buttons are designed to ease the flow for users signing in. Don’t use them in any other case or in any complex scenarios.

Related components

Action components

For other actions, see our interactive guide on which action component to choose.