v0.10.0

ComponentsP3 본문

ProviderButton

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

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

한눈에#

서드파티 사인인 버튼 — 브랜드 가이드라인이 색·로고·라벨을 고정합니다(WDS 테마로 전환하지 않음). 로고는 WDS 아이콘셋과 격리된 인라인 SVG입니다.

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

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

외형#

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

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

라벨#

action으로 브랜드 허용 라벨셋(가입·로그인·계속)을 고릅니다. 진입 맥락에 맞춰 동사를 맞춥니다.

action — continue / signin / signup

플레이그라운드#

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

import { ProviderButton } from '@wds/ui-web';

<ProviderButton
  provider="apple"
  appearance="black"
/>

사용#

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

Props#

Prop타입기본값설명
provider'apple' | 'google'—브랜드 — 외형·로고·라벨을 결정 (필수)
appearanceapple: 'black'|'white'|'white-outline' · google: 'light'|'dark'|'neutral'apple 'black' · google 'light'provider별 허용 외형
action'signin' | 'signup' | 'continue''continue'라벨셋
fullWidthbooleanfalse부모 폭 채움
…restOmit<HTMLAttributes<button>, 'children'>—onClick·disabled·className 등 전달

접근성#

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

토큰#

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

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

관련#