v0.21.0· ui-web 0.21.0

ComponentsP3 본문

ProviderButton

서드파티 사인인 버튼(Sign in with Apple / Google / Microsoft) — 브랜드 가이드라인이 색·로고·라벨을 고정. prominence parity로 다른 방식과 동등하게 노출합니다.

마지막 업데이트 2026-06-29

한눈에#

서드파티 사인인 버튼 — 브랜드 가이드라인이 색·로고·라벨을 고정합니다(WDS 테마로 전환하지 않음). 로고는 WDS 아이콘셋과 격리된 인라인 SVG입니다. Microsoft 버튼은 개인/계정 공급자 버튼이며, 조직 도메인 기반 엔터프라이즈 SSO는 AuthMethodButton method="sso"로 분리합니다.

  • Apple · Google · Microsoft
  • 외형 8종
  • prominence parity
  • 브랜드 고정

기본 — Apple(black) · Google(light) · Microsoft(light)

외형#

브랜드가 허용하는 외형만 노출합니다 — Apple 3종, Google 3종, Microsoft 2종. 맥락(밝은/어두운 배경)에 맞춰 명시적으로 고릅니다(자동 테마 전환 아님).

Apple — black / white / white-outline
Google — light / dark / neutral (G 로고는 항상 4색 고정)
Microsoft — light / dark (Microsoft 계정 버튼)

라벨#

action으로 브랜드 허용 라벨셋(가입·로그인·계속)을 고릅니다. 진입 맥락에 맞춰 동사를 맞춥니다. 단, Microsoft는 브랜드 문구 경계를 보수적으로 적용해 모든 action에서 “Microsoft로 로그인”으로 렌더합니다.

action — continue / signin / signup

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

ProviderButton를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

사용 시점#

  • 이럴 때: 비밀번호·패스키·조직 SSO와 함께 소비자 서드파티 로그인을 제공할 때 — Login 패턴의 방식 패밀리 한 칸.
  • prominence parity: 다른 로그인 방식과 동등한 크기·위치로 노출합니다(더 작게 만들거나 접지 않기) — 브랜드 사인인의 공통 요구.
  • Apple 동등성 정책: 서드파티 소셜 로그인만으로 계정을 만드는 앱은 Sign in with Apple을 동급 옵션으로 함께 제공해야 합니다(App Store §4.8).
  • 피하세요: 색·로고·라벨 임의 변경(G 로고 recolor·자체 문구) — 브랜드 위반. 일반 행동은 Button.
  • 피하세요: 조직 도메인 페더레이션(SAML/OIDC) 같은 엔터프라이즈 SSO는 provider 버튼이 아니라 일반 CTA(예: “조직 SSO로 계속하기”)로.
  • Microsoft 경계: provider="microsoft"는 Microsoft 계정/OIDC 진입용입니다. 회사/학교 계정 라우팅, tenant 선택, 조직 IdP는 제품 인증 코드가 처리합니다.

Props#

Prop타입기본값설명
provider'apple' | 'google' | 'microsoft'—브랜드 — 외형·로고·라벨을 결정.
appearance'black' | 'white' | 'white-outline' | 'light' | 'dark' | 'neutral'—Apple 허용 외형 — 기본 black Google 허용 외형 — 기본 light Microsoft 허용 외형 — 기본 light
action'signin' | 'signup' | 'continue'continue라벨셋 — 기본 continue
fullWidthbooleanfalse부모 폭을 채움
refRef<HTMLButtonElement>—루트 &lt;button&gt;으로 전달되는 ref

접근성#

  • 로고는 장식(aria-hidden) — 접근성 이름은 라벨 텍스트(“Apple로 계속하기” 등)가 전달합니다.
  • 최소 높이 44px·:focus-visible 포커스 링으로 키보드 가시성 보장(WCAG 2.4.7·타깃 크기).
  • 색 대비는 브랜드 외형이 보장(흰 위 검정·검정 위 흰). 배경과의 대비는 외형 선택으로 맞춥니다.

토큰#

형태는 WDS 토큰, 외형 색은 브랜드 고정값(테마 무관 불변 — 토큰화하지 않는 의도적 예외).

속성값
형태radius.control · space.4 padding · space.2 gap · 최소 높이 44px · font-size.body-1 · medium
포커스color.focus-ring
Apple 색#000/#fff(+outline #000) — 브랜드 고정
Google 색light #fff/#747775 · dark #131314/#8E918F · neutral #f2f2f2 — 브랜드 고정
Microsoft 색light #fff/#8A8886 · dark #2F2F2F — 브랜드 고정

관련#