Social Button

OAuth 소셜 로그인 플로우에 사용하는 버튼입니다. Google, Facebook, Apple, X(Twitter)를 지원합니다.

Figma 컴포넌트: Social button

Theme

각 브랜드별로 3가지 테마를 제공합니다: Brand, Color, Gray.

각 브랜드의 공식 브랜드 컬러를 그대로 사용하는 테마입니다. 로그인 화면의 메인 CTA에 적합합니다.

흰 배경 + 브랜드 컬러 아이콘. 브랜드를 살리면서도 배경과 덜 부딪히는 조합입니다.

흰 배경 + 모노톤 아이콘. 브랜드를 튀지 않게 표현해야 하는 폼에서 사용합니다.

supportingText={false} 로 설정하면 아이콘만 있는 정사각형 버튼을 사용할 수 있습니다.

여러 소셜 로그인 옵션을 함께 노출할 때 사용하는 그룹 프리셋입니다. 레이블 포함 버튼을 수직으로 쌓는 Buttons 스타일과, 아이콘만 가로로 나열하는 Icons 스타일을 제공합니다.

세로로 쌓인 풀-너비 버튼 그룹. 로그인 모달의 기본 레이아웃입니다.

아이콘만 가로로 배치하는 그룹. 이메일 폼 위·아래의 보조 옵션에 적합합니다.

Prop	Type	Default	Description
`social`	google \| facebook \| apple \| twitter	`google`	소셜 플랫폼
`theme`	brand \| color \| gray	`brand`	테마 — 브랜드 컬러 / 컬러 아이콘 / 모노톤
`supportingText`	boolean	`true`	텍스트 레이블 표시 여부. false이면 아이콘만
`state`	default \| hover \| focused \| disabled	`default`	상태 (문서 시각화용)
`label`	string	`-`	기본 레이블(예: "Sign in with Google")을 덮어쓰는 사용자 정의 텍스트

Property	Values
Social	`Google` `Facebook` `Apple` `Twitter`
Theme	`Brand` `Color` `Gray`
Supporting text	`True` `False`
State	`Default` `Hover` `Focused`

Property	Values
Style	`Buttons` `Icons`
Theme	`Brand` `Color` `Gray`