WIZ Design System

한눈에#

WDS가 테마를 소유하는 인증 방식 버튼입니다 — 패스키·조직 SSO·비밀번호·이메일·매직링크. 코어 Button(secondary) 위에 코어 아이콘과 한국어 기본 라벨을 얹습니다. 색·로고·라벨이 브랜드 소유라 테마 전환하지 않는 ProviderButton과 짝을 이루는 두 번째 인증 버튼 종류입니다.

방식 5종
Button(secondary) 래퍼
코어 아이콘 + 한국어 라벨
ProviderButton과 짝

기본 — method 프리셋

사용 시점#

이럴 때: 패스키·조직 SSO·비밀번호·이메일·매직링크처럼 WDS가 테마를 소유하는 인증 방식을 노출할 때. 보통 LoginMethods 그룹 안에서 ProviderButton과 함께 씁니다.
브랜드 사인인에는 쓰지 마세요: 서드파티 사인인은 브랜드가 색·로고·라벨을 고정하므로 ProviderButton을 씁니다. 일반 Button 래퍼로 표현하면 브랜드 위반입니다.
패스키 1차 경로: 패스키의 1차 UX는 이메일 필드 autocomplete="username webauthn" autofill(conditional UI)입니다. method="passkey" 버튼은 보완/명시 경로로 두세요 — 자세한 내용은 Login 패턴.
일반 행동: 인증과 무관한 일반 CTA는 Button을 씁니다.

방식#

method 프리셋이 코어 아이콘 + 한국어 기본 라벨을 공급합니다. 다섯 종을 모두 지원합니다.

method — passkey / sso / password / email / magic-link

라벨·아이콘 오버라이드#

label로 라벨을, icon으로 선행 아이콘을 교체합니다. method 없이 children만으로도 쓸 수 있습니다.

label / icon 오버라이드

상태#

Button API를 그대로 패스스루합니다 — loading·disabled로 진행/비활성 상태를 표현합니다.

loading / disabled

위계 조정#

기본 variant="secondary"이나, 1차 방식을 강조할 땐 variant="primary"로 올립니다. 단, LoginMethods의 prominence parity를 깨지 않도록 신중히 씁니다.

variant — secondary(기본) / primary

Props#

Prop	타입	기본값	설명
`method`	`'passkey' \| 'sso' \| 'password' \| 'email' \| 'magic-link'`	—	인증 방식 프리셋 — 코어 아이콘 + 한국어 기본 라벨을 공급
`label`	`string`	—	라벨 텍스트 — method 기본 라벨을 대체. (또는 children)
`icon`	`ReactNode`	—	선행 아이콘 — method 아이콘을 대체. method도 없을 때 임의 아이콘 지정용
`children`	`ReactNode`	—	label 미지정 시 라벨 소스로 쓰이는 자식
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`secondary`	시각 위계. primary 채움은 일반 크기 라벨 AA 4.5:1 보장 (DD-6)
`size`	`'sm' \| 'md' \| 'lg'`	—	높이 32/44/52px — control.height 토큰과 동기
`fullWidth`	`boolean`	`true`	부모 폭 100% 채움
`loading`	`boolean`	—	로딩 중 — 라벨 앞에 Spinner를 덧붙이고 비활성화 (불리언 prop 무접두, COMPONENT_API §1)
`ref`	`Ref<HTMLButtonElement>`	—	네이티브 <button>으로 전달되는 ref (React 19 ref-as-prop)

method·label·children 중 하나로 라벨을 제공해야 합니다(없으면 런타임 오류).

접근성#

아이콘은 장식(aria-hidden) — 접근성 이름은 라벨 텍스트(“패스키로 로그인” 등)가 전달합니다.
최소 높이 44px·:focus-visible 포커스 링은 코어 Button이 보장합니다(WCAG 2.4.7·타깃 크기).
loading 시 aria-busy로 진행을, disabled로 비활성을 보조 기술에 전달합니다.

AuthMethodButton