ButtonSocial

ButtonSocial should be used only to enable users to sign-up or sign-in to Pinterest using other trusted services.

also known as Social, Action Button

Figma:

Responsive:

Adaptive:

Component props
Name	Type	Default
`service` Required	`"apple" \| "facebook" \| "google" \| "email" \| "line"`	-
	Text to render inside the ButtonSocial to convey the function and purpose of the ButtonSocial.
`type` Required	`"login" \| "continue" \| "signup"`	-
	Text to render inside the ButtonSocial to convey the function and purpose of the ButtonSocial.
`dataTestId`	`string`	-
	Available for testing purposes, if needed. Consider better queries before using this prop.
`onClick`	`(arg1: { event: React.MouseEvent<HTMLButtonElement> \| React.KeyboardEvent<HTMLButtonElement>; }) => void`	-
	Callback invoked when the user clicks (press and release) on Button with the mouse or keyboard.

ButtonSocial has 5 different services:
1. Apple
2. Facebook
3. Google
4. Line
5. Email

service="apple"

service="facebook"

service="google"

service="line"

service="email"

ButtonSocial is available with 3 different messages:
1. Login with
2. Continue with
3. Sign up with

type="login"

type="continue"

type="signup"

Component quality checklist
Quality item	Status	Status description
Figma Library	Ready	Component is available in Figma for web and mobile web.
Responsive Web		Component does not respond to changing viewport sizes in web and mobile web.

ButtonLink
Use ButtonLink when an action is needed instead of a link.

ButtonGroup
When displaying multiple ButtonLinks in a layout, use ButtonGroup to ensure consistent spacing and wrapping behavior.

IconButton
Use IconButton when only an icon is needed instead of text.